BLOG ANAK DEMAK: TIPS BLOG

Tampilkan postingan dengan label TIPS BLOG. Tampilkan semua postingan

Award Istimewa Dari Dua Sahabat Paling Baik

3:43 PM | Diposting oleh Unknown

Alhamdulillah hari yang cerah, secerah hatiku saat ini. Semoga hal indah ini juga menjumpai sahabat blogger dimanapun berada. Kali ini saya tidak ingin mengetengahkan tutorial blogger ataupun tips trik blogging dulu, karena saya ingin majang award istimewa dari dua sahabat paling baik yang rasanya tak ada yang tak mengenal keduanya dibelantara blogger?

Bukan sengaja menyematkan kata istimewa dan sahabat paling baik pada award ini.
Istimewa: karena setelah sekian tahun baru kali ini adalagi sahabat yang memberikan apresiasi berupa award, dan setelah custom domain ini terhitung awar pertama dan kedua.

Sahabat paling baik. karena keduanya adalah sahabat yang saya kira tidak pernah lupa untuk membagikan +1 pada setiap sharing posts saya di google plus, keduanya juga merupakan sahabat yang hampir disetiap postingan saya memberikan apresiasi meskipun saya kira salah seorang diantara mereka sudah tidak asing dengan tutorial yang saya ketengahkan karena dia sendiri the next blogger master insyaAllah, bagi saya mereka sahabat yang baik dengan apresiasinya pada saya dan sahabat blogger lainnya akan membantu kita untuk terus semangat dalam berbagi.

Ini dia sahabat yang telah berbaik hati memberikan award diatas

Oh ya ternyata ni, untuk sekedar posting award juga tidak semudah yang saya kira, karena selain award ada pula PR yang harus dikerjakan. PR itu adalah menjawab 7 fakta tentang diri kita dan membagikan kembali award yang didapat ke 15 orang sahabat blogger.

Nah untuk yang pertama tiba-tiba saya berfikir, kesempatan lagi untuk saya memperkenalkan dan menegaskan tentang diri saya yang sering disangkai keliru hanya karena tema blog yang saya usung dan banyaknya blogger yang melakukan pemalsuan identitas dengan alasan yang beragam.

Baiklah 7 fakta itu adalah:

Saya seorang hamba Allah,

seorang manuasia biasa dengan segala kekurangan dan keterbatasnya ingin terus berbagi, Alhamdulillah.

seorang anak dari kedua orang tua yang saya sayangi (semoga Allah menjaga mereka) amiin,

seorang saudari dari saudara-saudara lelaki saya, maka sayalah yang tercantik sendiri :)

seorang istri dari suami yang teramat saya cintai fillah, maka jangan pernah mencoba menodai hati saya :))

seorang Ummi dari anak-anak lelaki saya, maka sekali lagi tetap menjadi yang tercantik diistanaku :)

Jadi tentulah saya seorang wanita/perempuan, maka berhentilah menyapa saya dengan Mas, kang, baang, dll yang lebih tepat sobat sematkan pada lelaki!

Terakhir yang buat saya bingung, mau diforward kemana lagi secara sekarang kayaknya musim award? Khawatir aja yang dikasih dah terima bahkan mungkin dah lebih dari double, akhirnya sebelum posting award harus selancar dulu nyari orang-orang yang akan menerimanya.

Jadi saya kata ini award istimewa untuk orang-orang istimewa karena sobat semua adalah yang terpilih dari hati saya (cikiciww)

contoh:

[gallery%2520foto%2520keren%2520dengan%2520css3%255B6%255D.jpg]

Kalau anda sudah menerima award yang sama mohon maaf ya! Saya bingung mau memberikan kesiapa lagi? Pengunjung yang ingin memboyong award ini juga boleh, konfirmasi saja dikolom komentar insyaAllah saya akan kunjungi blog sobat.

Menambahkan Basmalah dan Hamdalah di Awal dan Akhir Artikel

3:40 PM | Diposting oleh Unknown

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Salam sahabat blogger, alhamdulillah dapat menyapa anda kembali, semoga dimanapun anda berada selalu dalam penjagaan-Nya. Setelah beberapa waktu sempat fakum, request tutorial yang disampaikan lewat komentar atau emailpun akhirnya menumpuk. Mohon maaf juga untuk pertanyaan-pertanyaan yang belum sempat terjawab satu persatu. Hari ini dan kedepan insyaAllah saya ingin mencicil request sahabat blogger, tapi mohon jangan ditambah dulu sebelum PR yang satu ini selesai! Baiklah tutorial kali ini saya ingin mengetengahkan cara menambahkan basmalah dan hamdalah diawal dan akhir artikel blog.
Hampir setiap muslim pasti mengenal kalimat basmalah dan hamdalah. Kalimat pendek sarat makna ini biasanya dipakai ketika akan memulai suatu pekerjaan dan usai mengerjakannya. Karena bacaannya yang pendek ini pula, banyak yang menyepelekan kalimat basmalah dan hamdalah. Padahal jika dikaji lebih mendalam, di samping sebagai sarana meraih cinta Allah, ternyata kedua kalimat ini mengandung kekuatan luar biasa dalam meraih kesuksesan dan keberkahan hidup. Tidaklah mengherankan jika para Nabi, Rasul, dan orang-orang sukses selalu membaca basmalah setiap memulai aktivitasnya dan mengakhiri dengan hamdalah sebagai ungkapan syukur.
Tapi tak menambahkan kedua kalimat ini dalam artikel yang anda tulis, dan mencukupkannya dilisan sendiri saja tentu juga sudah cukup dan baik karena menambahkan keduanya dipostingan bukanlah kewajiban.
Baiklah cukup untuk pengantar, berikut Menambahkan Basmalah dan Hamdalah di Awal dan Akhir Artikel

Setelah login ke akun blogger anda
Pada dasbor >> klik tab template >> Edit HTML
Klik tab drop down Lompat ke widget >> Blog1 >> Klik tanda panah kecil disamping kode dengan id Blog1
Klik tanda panah kecil disamping kode <b:includable id='post' var='post'>
Click Ctrl+F >> cari kode <data:post.body/>

Untuk menambahkan basmalah diawal posting tambahkan kode berikut diatas <data:post.body/>

<div style='text-align: center;'><span style='font-size: medium;'><span class='messageBody' data-ft='{"type":3}'><span dir='rtl'>بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم</span></span></span></div><br/>

Untuk menambahkan hamdalah diakhir postingan tambahkan kode berikut dibawah <data:post.body/>

<div align='center'><span style='font-size: medium;'>ٱلْحَمْدُ لِلَّهِ رَبِّ
ٱلْعَٰلَمِين</span></div>

Simpan template dan lihat hasilnya di blog anda.

Demikian tutorial kali ini, cara menambahkan basmalah dan hamdalah diawal dan akhir artikel blog. Semoga bermanfaat dan berkah.
Terimakasih.

Modifikasi Widget Profil Blogger

3:32 PM | Diposting oleh Unknown

Tutorial kali ini saya ingin mengetengahkan cara membuat modifikasi tampilan widget profil blogger. Sebagaimana tutorial sebelumnya, cara menambahkan basmalah dan hamdalah di awal dan akhir artikel blog , tutorial kali ini juga masih merupakan request sahabat blogger.

Ada beberapa pilihan modifikasi widget profil blog, intinya hanya pada permainan CSS, karena yang ditanya adalah yang terpasang diblog ini maka saya hanya akan memberikan kode sesuai permintaan, untuk selanjutnya anda bisa lebih kreatif dalam membuat modifikasi lainnya.

Baiklah silahkan ikuti langkah-langkah berikut:

cara membuat modifikasi widget profil blogger di blog

1. Setelah login ke akun anda.
2. Pada dasbor >> masuk menu tata letak >> klik tambah gadget >> HTML/JavaScript
3. Pada kolom title beri nama sesuai keinginan, selanjutnya copy dan tempelkan kode HTML berikut pada kolom kontent

<style>
#profileAmatullah{
border:2px solid #888; margin:2px 5px 0px 0px; padding:2px;
}
#profileAmatullah:hover {
border:2px solid #ccc;
cursor:pointer;
}
.opacity {
opacity: 0.5;
margin-left: 50px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
.opacity:hover {
opacity: 1;
margin-left: 0px;
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand');
zoom: 1;
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
}
</style>
   
<img align="left" class="opacity" id="#profileAmatullah" src="URL YOUR IMAGE PROFIL" />About YOU<a href="YOUR LINK BLOGGER PROFIL" style="color: #888888;">...Read More</a>
<div class="clear">
</div>
<span class="widget-item-control">
<span class="item-control blog-admin">
<a class="quickedit" href="http://www.blogger.com/blogID=5143343840607190550&widgetType=Profile&widgetId=Profile1&action=editWidget&sectionId=lowerbar1" onclick="return _WidgetManager._PopupConfig(document.getElementById("HTML1"));" target="configHTML1" title="Edit">
</a>
</span>
</span>
<br />
<div class="clear">
</div>

Kustomisasi

Ganti profilAmatullah dengan nama profil anda,
perhatikan tulisan tebal berwarna diatas, ganti dan sesuaikan dengan keinginan anda
ganti blog ID dengan ID blog anda
silahkan jika ingin menambahkan CSS untuk modifikasi sesuai keinginan.

4. Simpan dan klik simpan lagi. Lihat hasilnya diblog anda

Demikian tutorial kali ini, cara modifikasi tampilan widget profil blogger pada blog. Semoga bermanfaat.

Highlight pada Script/Kode di Postingan

3:26 PM | Diposting oleh Unknown

Memberikan Highlight untuk script atau kode pada postingan akan lebih memperjelas pembaca. Contohnya bisa kamu lihat pada blogku ini. Setiap kali ada script/kode maka akan selalu ada highlight (kotak) yg akan membedakan dengan tulisan yg lain. Nha kamu mau tahu cara pembuatamnya?

Gini nih caranya :
1. Login ke blogger lalu pilih Layout-->Edit HTML
2. Kemudian copy kode dibawah ini lalu pasang di Script CSS kamu atau pasang sebelum kode ]]></b:skin>

.alert { background: #DDE4FF;text-align: left;padding: 5px 5px 5px 5px;border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;}

Kode yang berwarna merah (#DDE4FF) adalah warna background kotak highlight, kamu bisa menggantinya dengan kode warna yang lain yang cocok dengan background blog kamu.

3. Kalau sudah kemudian Simpan.

Cara Posting
Supaya kode/scriptnya nanti bisa ada kotak highlight-nya maka untuk memposting harus pake cara2 tersendiri. Yaitu dengan menambahkan kode ini <p class="alert"> sebelum kode/script yg akan diberi highlight. kemudian ditambahkan kode </p> diakhir script/Kode.

Dah gitu aja, gampang kan

Cara Pasang Flash di Blog

3:23 PM | Diposting oleh Unknown

Untuk memasang flash ke dalam blog cukuplah mudah. Yang kamu perlukan yaitu file flash yang biasanya ber-extensi .swf lalu upload file tersebut ke hosting. misal di geocities.com ato 000webhost ato tempat hosting lainnya. File animasi flash tersebut bisa dijadikan hiasan pada blog ato bisa juga dijadikan hiasan di header sehingga membuat blog menjadi lebih animatif. Untuk memasang flash pada blog caranya sebagai berikut :

1. Login ke blogger kemudian pilih menu "Layout".
2. Kemudian klik link "Add a gadget" dimana akan ditempatkan animasi flash.3. Pilih "HTML/Javascript" kemudian taruh script berikut :

<embed src="alamat -anada.swf" quality="high" bgcolor="white" width="500" height="100" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi? P1_Prod_Version=ShockwaveFlash"></embed>

* Ganti "alamat -anada.swf" dengan alamat file flash kamu yang telah ditaruh di hosting.
* Ganti width="500" height="100 dengan ukuran dari file flashmu.

Mengganti "Older Posts" Dengan Angka

3:19 PM | Diposting oleh Unknown

Secara umum, navigasi untuk pindah halaman di blogspot biasanya menggunakan link dengan teks "Older Posts (posting lama)" dan "Newer Posts (posting baru)". Beda dengan wordpress yang navigasinya bisa berbentuk angka sehingga bisa memudahkan untuk loncat beberapa halaman ke postingan yg lama maupun baru.
Nha trik kali ini akan menjelaskan bagaimana cara mengganti link "Older Posts (posting lama)" dan "Newer Posts (posting baru)" menjadi angka seperti gambar di bawah ini

1. Langkah awal tentu saja harus menuju ke desain template anda kemudian ke "Edit HTML"
2. setelah itu cari kode ini ]]></b:skin> kalo sudah ketemu taruh script dibawah ini sebelum kode tersebut

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

3. setelah itu cari kode ini </body> kemudian taruh script dibawah ini sebelum kode tersebut.

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if> </b:if>

Untuk kemudahan template di pertinjau dulu sapa tau error . .

Cara Menambah Elemen Halaman Diatas Header

3:10 AM | Diposting oleh Unknown

Kali ini saya ingin berbagi trik blog cara menambah elemen halaman diatas header dan cara membuat manu tab navigator horizontal. Berhubung pada postingan cara membuat menu tab view, seorang teman bertanya pada kolom komentarnya seperti ini:

rencanapembelajaran mengatakan...

oh ya, kalau mau buat tab menu di bagian atas header bisa gak. soalnya cuma blog2 tertentu yang ada menu nya di bagian atas, misalnya kayak blog ini ada menu agama islam, teknologi, glitter text, kesehatan dsn. blog saya bisa kah di buat spt itu ? mohon petunjuknya.. silahkan di liat blog saya !
Jawabannya: Alhamdulillah bisa, pertama anda tentu harus mengetahui dulu cara menambah elemen di atas header.

Berikut ikuti langkah langkahnya:

Dalam keadaan login=> pada dasbor klik tata letak/ layout=> edit HTML=> cari kode ]]></b:skin>

Tambahkan kode berikut diatas kode ]]></b:skin>

#gadget_header{
margin:10px 0;
padding:1%;
width:100%;}

Kemudian cari kode berikut <div id='header-wrapper'>

Kemudian copy kode berikut diatas <div id='header-wrapper'>

<div id="gadget_header">
<b:section class='header' id='gadgetheader' preferred='yes'/>
</div>

Selanjunya simpan template!

Lihat hasilnya klik elemen halaman, jika ada kolom tambah gadget diatas header langkah langkah yang anda lakukan berhasil!

Selanjutnya elemen tambah gadget diatas header bisa anda gunakan untuk macam macam widget. Untuk cara membuat menu tab navigator horizontal pada postingan berikutnya insyaAllah. Sedangkan cara menambah elemen halaman dibawah header bisa lihat .di sini

Cara Menambahkan Dua Dan Tiga Kolom Elemen Halaman Dibawah Header

3:05 AM | Diposting oleh Unknown

Tutorial kali ini kembali kita akan belajar desain template, sebelumnya saya pernah membahas cara menambahkan elemen halaman atau kolom tambah gadget dibawah header. Nah sekarang kita akan belajar cara menambahkan elemen halaman dibawah header menjadi dua, tiga kolom atau multi kolom, seperti screenshot berikut.

Caranya sangat mudah, ikuti langkah-langkah berikut:

Cara menembahkan dua dan tiga kolom elemen halaman dibawah header:
1. Pada dasbor klik Tata Letak=> Edit HTML=> Cari kode berikut ]]></b:skin> jika sudah dapat, letakkan kode berikut diatasnya:

#box-main-container {
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}

Kalau sobat dah bisa ngedit CSS atau sedikit bisa membaca maksud perintahnya silahkan edit exp: padding, margin atau bordernya!

2. Kemudian cari kode <div id='main-wrapper'> setelah dapat letakkan kode beikut diatasnya (untuk dua kolom dibawah header):

<div id='box-main-container'>
<div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 50%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

</div>3. Simpan template dan lihat hasilnya dibagian elemen halaman, jika berhasil sobat akan melihat seperti screenshot diatas.
Semoga bermanfaat. I hope you enjoyed this tutorial comments are welcome see my result

menambah tiga kolom elemen halaman dibawah header

Membagi Header Menjadi Dua Kolom

3:02 AM | Diposting oleh Unknown

Alhamdulillah hari ini bisa update lagi setelah beberapa hari asyik ngotak ngatik CSS dan belajar menggunakan beberapa program (Adobe Photoshop, Corel Draw X4, DreamLight Photo Editor dan PhotoShine) yang baru saya instal dilaptop kesayangan, yang tentu program itu saya harapkan bisa membantu saya lebih kreatif lagi dalam mendesain template kedepan dan menggunakannya pada hal-hal lain yang juga memeberi maslahat.
Tutorial sebelumnya kita sudah pernah membahas cara menambahkan kolom atau elemen halaman diatas header dan dibawah header juga menambahkan dua dan tiga kolom dibawah header. Kali ini kita akan belajar menambahkan elemen halaman baru pada header atau membagi header menjadi dua kolom.
Hasilnya seperti screenshot berikut:

Berikut langkah-langkahnya:

1. Seperti biasa dalam keadaan log in pada account sobat
2. Klik Tata Letak
3. Klik Edit HTML
4. Bisa Download Template Lengkap jika khawatir gagal
5. Sekarang cari kode CSS seperti beikut:

/* Header ----------------------------------------------- */ #header-wrapper { width:930px; margin:0 auto 10px; border:1px solid $bordercolor; } #header-inner { background-position: center; margin-left: auto; margin-right: auto; } #header { margin: 5px; border: 1px solid $bordercolor; text-align: center; color:$pagetitlecolor; }

Ganti semua kode diatas dengan kode berikut:

/* Header ----------------------------------------------- */ #header-wrapper { width:930px; margin:0 auto 0px; background:#ffff; height:180px; } #header-one { width:50%; background-position: left; margin-left: auto; margin-right: auto; float:left; } #header { margin: 0px; text-align: left; color:$pagetitlecolor; } #header_two{ width:50%; float:left; padding-top:10px;

Perhatikan kode yang berwarna merah pada bagian awal, sesuaikan lebar atau angka widht dengan lebar header template sobat.

7. Sekarang cari kode seperti berikut:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tempat Eksperimen Kecil (Header)' type='Header'/>
</b:section>
</div>

8. Setelah menemukan kode diatas, sisipkan kode warna merah berikut dengan penempatan yang menyarupai contoh dibawah ini:

<div id='header-wrapper'>
<div id='header-one'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tempat Eksperimen Kecil (Header)' type='Header'/>
</b:section>
</div>
<div id='header_two'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>

9. Klik Simpan Template
10. Selesai
Untuk melihat hasil, klik elemen halaman, jika tampilan header sobat-sobat sekalian serupa screenshoot diatas, berarti eksperimennya berhasil. Silahkan isi kolom baru dengan ragam widget atau ads.
Semoga bermanfaat dan sukses selalu!

Cara Menambahkan Widget Popular Posts Blogger Pada Blog

2:47 AM | Diposting oleh Unknown

Widget popular posts menurut saya adalah widget penting yang harus ada pada suatu blog. Fungsi atau keuntungan yang akan didapatkan dengan menampilakan widget popular posts pada blog selain untuk mengetahui postingan blog apa saja yang paling popular berdasarkan banyaknya total tayang baik perminggu, perbulan atau setiap waktu juga sebagai promo pada visitor untuk mengundang klik dan penambahan page view.
Banyak versi widget popular posts yang hadir dari hasil modifikasi baik dari penambahan script atau CSS. Selain widget popular posts berdasarkan banyaknya page view ada juga widget popular posts berdasarkan total comments atau jumlah komentar, jadi postingan yang paling banyak memiliki jumlah komentarlah yang akan menjadi popular posts. InsyaAllah saya akan mengetengahkan satu persatu pada postingan yang terjadwal setiap modifikasi dari widget popular posts berdasarkan page view maupun total comments yang sudah pernah saya terapkan pada berbagai template blogger atau blog saya.
Baiklah segera ke tutorial:
Cara Menambahkan Widget Popular Posts Pada Blog

Pilih gadget seperti image berikut:

Konfigurasikan widget popular posts anda

Simpan dan lihat hasilnya pada blog

Mudah bukan? Tampilan popular posts bawaan blogger diatas masih sangat sederhana dengan penambahan Script dan CSS kita dapat memodifikasi lagi tampilan diatas diantaranya seperti screen shoot dibawah ini:

Widget Popular Posts Dengan Efek Hover Border Dan Background Color

2:43 AM | Diposting oleh Unknown

Sebelumnya saya pernah mengetengahkan cara menambahkan widget popular posts pada blog, widget bawaan blogger tersebut merupakan widget popular posts berdasarkan page view yang tampilannya standart, pada kesempatan kali ini insyaAllah saya ingin berbagi cara memodifikasi widget popular posts dengan menambahkan efek hover border dan background color.

Contohnya seperti screen shoot disamping atau silahkan lihat dulu live demo dengan mengklik button berikut:
View Demo Tertarik untuk mencobanya? Silahkan Ikuti langkah-langkah berikut:
1. Setelah login ke akun anda pada bagian tata letak>> Tambah gadget>> Tambahkan popular posts bawaan blogger dan konfigurasikan widget dengan tidak mencenteng kotak kecil thumbnail dan snippet. Kemudian simpan. Jika belum tahu cara menambahkan widget popular posts bawaan blogger, silahkan lihat tutorialnya disini
2. Kemudian masuk pada bagian template>> edit HTML >> Cari kode ]]></b:skin>
3. Salin dan tempelkan kode CSS berikut diatas kode ]]></b:skin>
Kode untuk efek hover border bottom color:

.span class="fullpost">

sorryy . tanda tititk (.) di atas di ganti dengan (<) yang ada dalam kurung

.popular-posts ul{padding-left:0px;} .popular-posts ul li {background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBXiVYCrRoWbiPoqc2ng_0TmtJK4TJN1WSNBZn0YeOZ723g6lL41SeqThN-mtLciCRS7S6bHg9_btiig_4PfjkQ5CoW8sN0ZA6pQZXohexrPXxXuxSldXDbgnPgjBLnAqSvspAmJox__g/s1600/helperblogger-list-style-icon.png) no-repeat scroll 5px 10px; list-style-type: none; margin:0 0 5px 0px; padding:8px 5px 7px 22px !important; border-bottom: 2px dotted #dddddd; } .popular-posts ul li:hover { border-bottom: 2px solid #6BB5FF; } .popular-posts ul li a:hover { text-decoration:none; }

Kode untuk efek hover border rounded color

.popular-posts ul{padding-left:0px;} .popular-posts ul li {background: #FFF url(http://1.bp.blogspot.com/_7wsQzULWIwo/ SmodosCuJCI/AAAAAAAABh4/ZSXbVW9Qpa8/s400/261.gif) no-repeat scroll 5px 10px; list-style-type: none; margin:0 0 5px 0px; padding:5px 5px 5px 20px !important; border: 1px solid #dddddd; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } .popular-posts ul li:hover { border:1px solid #6BB5FF; } .popular-posts ul li a:hover { text-decoration:none; }

Kode untuk efek hover border rounded dan background color Seperti kode diatas, hanya anda tambahkan saja pada kode berikut kode background color seperti berikut:

.popular-posts ul li:hover { background: #CCE9FD;border:1px solid #6BB5FF; }

Perhatikan kode berwarna biru diatas adalah kode warna yang digunakan untuk hover border dan backgroundnya, anda bisa mengganti warnanya sesuai keinginan anda, untuk referensi kode warna bisa lihat tool kode warna disini

Widget Popular Posts Dengan Circle Image Style

2:30 AM | Diposting oleh Unknown

InsyaAllah pada kesempatan kali ini, saya masih akan mengetengahkan modifikasi berbeda dari widget popular posts blogger, sebelumnya telah ada sedikitnya 4 widget popular posts dengan efek berbeda, kali ini modifikasi terletak pada style, dan juga penggabungan efek. Seperti tutorial kali ini, kita akan membuat widget popular posts dengan image circle style dan penambahan efek hover spinning pada thumbnails dan efek hover border dan background pada links. Seperti contoh screen shoot disamping atau silahkan lihat live demo pada blog ini atau klik button/tombol berikut:

Widget popular posts ini merupakan widget default blogger, modifikasi yang kita buat hanya menambahkan CSS3 sehingga dijamin tetap fast loading.
Nah jika anda tertarik menambahkan widget popular posts dengan image circle style pada blog anda, silahkan ikuti langkah-langkah pembuatannya sebagai berikut:
1. Setelah login ke akun anda pada bagian tata letak>> Tambah gadget>> Tambahkan popular posts bawaan blogger dan konfigurasikan widget dengan mencenteng kotak kecil thumbnail dan biarkan kosong pada kotak kecil snippet. Simpan. Jika belum tahu cara menambahkan widget popular posts bawaan blogger, silahkan lihat tutorialnya disini
2. Kemudian masuk pada bagian template>> edit HTML >> Cari kode ]]></b:skin>
3. Salin dan tempelkan kode CSS berikut diatas kode ]]></b:skin>

.popular-posts ul{padding-left:0px;font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0} .popular-posts ul li {background: url(#) no-repeat scroll 5px 5px; list-style-type: none; margin:0 0 5px 0px; padding:5px 5px 5px 5px !important;font-size:12px!important;font-weight:550; border: 1px solid #58ACFA; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; } .popular-posts ul li:hover { background: #CCE9FD;border:1px solid #58ACFA; } .popular-posts ul li a:hover { text-decoration:none; } .popular-posts .item-thumbnail img { -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);height:70px;width:70px;}.popular-posts .item-thumbnail img:hover { -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);-webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg);}

Simpan template dan lihat hasilnya ddiblog anda!
Demikian tutorial menambahkan widget popular posts dengan image circle style. Semoga bermanfaat.
Credits:

Style widget popular posts dan efek yang ada adalah hasil modifikasi saya, jika anda tertarik dengan widget ini dan hendak mempublikasikannya kembali, adalah lebih bijak jika anda memberi link back kepostingan ini atau keblog ini. Terimakasih ats kerja sama anda!

Widget Popular Posts Dengan Multi Colored Style

2:27 AM | Diposting oleh Unknown

Postingan kali ini masih seputar tutorial modifikasi widget popular posts, sebuah widget yang bertujuan untuk menampilkan postingan yang sering dilihat/ popular posts berdasarkan page view. Popular posts kali ini akan kita modifikasi masih dengan penambahan CSS3 menjadi Popular Post dengan tampilan sembilan warna pada setiap title posts seperti tampilan screen shoot disamping ini:
Tertarik untuk menambahkan widget popular posts dengan tampilan multi color seperti diatas? Berikut tutorial pembuatannya:
Tahap Pertama:

Seperti biasa login ke akun anda.

Pilih edit HTML >> Cari kode ]]></b:skin>

Setelah ketemu letakkan kode dibawah ini tepat diatas kode nomor dua tadi

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none} #PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;} #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px} #PopularPosts1 ul li:first-child:after, #PopularPosts1 ul li:first-child + li:after, #PopularPosts1 ul li:first-child + li + li:after, #PopularPosts1 ul li:first-child + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"} #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

4. Simpan.

Tahap Kedua Pada menu tata letak >> Pilih add gadget/tambahkan gadget >> Pilih Entri populer/Popular posts >> hilangkan tanda centang cuplikan gambar dan keterangan, tampilkan minimal 9 posts. Simpan dan lihat hasilnya diblog anda! Demikian tutorial cara menambahkan widget popular posts dengan tampilan multi color pada blog. Semoga bermanfaat.

Cara Membuat Chat Mirip Facebook Di Blog , Chat Facebook Di Blog

12:00 AM | Diposting oleh Unknown

Cara Membuat Chat Mirip Facebook Di Blog , Chat Facebook Di Blog. Memang Jejaring sosial Facebook lagi ngetrends dikalangan penduduk Indonesia.Saking terkenallnya Facebook maka banyak para blogger yang ingin mencari sesuatu yang berkaitan dengan facebook untuk dipasang di blognya. Template blogpun sudah ada yang mirip facebook, tapi ada juga yang mau chat di blognya mirip facebook, jadi Envolve inilah solusinya , pihak ini menyediakan widget chat seperti facebook. kalau belum yakin mari lihat terlebih dahulu demo berikut :

Langkah pertama anda kunjungi envolve.com Kemudian anda klik Try It For Free Lalu kamu akan diarahkan pada halaman sign up, kemudian kamu isi data data yang diperlukan untuk mendaftar
Jika semuanya data sudah terisi lalu klik Get Envolved!. Lalu copy dan paste kan kode yang

terilihat sebelum kode </head> Langkah terakhir Simpan Template

Cukup mudah bukan cara Membuat Chat Seperti Facebook Di Blog . semoga cara ini bermanfaat bagi anda.

Text Efek Keyboard Dengan CSS3 Pada Blog

11:54 PM | Diposting oleh Unknown

Memepercantik postingan blog dengan menambahkan dan menampilkan beberapa efek pada text memang merupakan suatu hal yang tidak jarang bloggers lakukan, baik itu efek dengan berbagai kombinasi antara CSS, JavaScript maupun jQuery.

Nah, pada tutorial kali ini, saya akan berbagi tentang bagaimana cara menambahkan efek keyboard pada text-text tertentu dengan cara mudah dan hanya memerlukan beberapa potong kode CSS3 dan tidak memerlukan tambahan seperti Javascript maupun jQuery sehingga tidak akan mempengaruhi load time blog.

lsc{ border:1px solid gray; font-size:14px; box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444; -webkit-border-radius:3px; -moz-border-radius:3px; -o-border-radius:3px; border-radius:3px; margin:2px 3px; padding:1px 5px; }

Memasukkan ke dalam Template

Login ke Blogger
Pada Dashboard, pilih Template » Edit HTML
Copy kode di atas kemudian pastekan tepat di atas tag ]]></b:skin>
Selanjutnya, pilih Simpan Template

Cara Menggunakan pada Postingan Blog

Pada saat membuat postingan baru pada blog, pilih HTML (samping kanan Compose) dan gunakan kode pemanggil <lsc> dan diikuti oleh text yang akan diberikan efek keyboard serta diakhiri dengan kode penutup </lsc>

. Berikut contohnya :

Ctrl Shift

Selamat Mencoba dan Semoga Bermanfaat...!!!

Membuat Widget Share Menggunakan CSS + HTML Di Blog

11:51 PM | Diposting oleh Unknown

Membuat Widget Share Menggunakan CSS + HTML Di Blog - udah lama nih gak share di blog ini, meskipun agak sepi, karena saya jarang Blogwallking dan sibuk mengurusi yang lainya. Okeh lanjut ke Topik kita kali ini adalah Cara Membuat Widget Share Dengan Menggunakan CSS dan HTML, artikel ini berasal dari Bloggermint, saya banyak belajar disana, coba lihat dulu demonya :

MAsuk ke Rancangan -- Edit Html - centang Expand Widget Template.
Kemudian Cari Kode ]]></b:skin> letakkan CSS berikut diatasnya :

#mintshare_mini, #mintshare_mini ul {padding:0; margin:0; list-style:none; width:100px; font-family:arial, sans-serif; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyHs_PaSZjR7KSaEPg4JTaNuYtGO5jB_8TR2Es5Mgw7PW_iHFuYELRmHIEMt1RVvmCwZnuXGaK7t9XL1D40KXhPKuU1mumHNwIsoE0ECR08kBtaAj2HemF634U8pOnnwsNxrYoaDzpggtH/s1600/bkg-btn-grey.gif") repeat-x scroll 0 0 #EDEDED;
}

#mintshare_mini {width:100px; height:30px; border:1px solid #888; padding: 0 15px;
-o-border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}

#mintshare_mini a.sharetext {
display:block; width:100px; height:30px; text-align:center; line-height:30px; color:#000; text-decoration:none; font-size:13px; font-weight:bold;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8eQy913cpjAbfvodBsJ8yu7cznj4WquTkZ2A3MZTNXcK1E_aAEygOMLNnEC3oRmQFTRx7bOclEZV0AyK2gCVQ16H7c92cE2Z56BcQY5UW1Vo0ZRBYEanvkuHSHYMotV-w9YsT-n-CDSyg/s1600/plus.png") no-repeat scroll 0 center transparent;
padding-left:5px;
cursor:pointer;
}

#mintshare_mini a.sharetext img {
border: 0 none;
display: block;
margin-left: 10px;
}

#mintshare_mini .flyout {
background: none repeat scroll 0 0 #AAAAAA;
height: 113px;
left: 40px;
position: relative;
top: -4px;
width: 0;
transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-webkit-transition: width 1s ease-in-out;
}

#mintshare_mini .flyout ul {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyHs_PaSZjR7KSaEPg4JTaNuYtGO5jB_8TR2Es5Mgw7PW_iHFuYELRmHIEMt1RVvmCwZnuXGaK7t9XL1D40KXhPKuU1mumHNwIsoE0ECR08kBtaAj2HemF634U8pOnnwsNxrYoaDzpggtH/s1600/bkg-btn-grey.gif") repeat-x scroll 0 0 #EDEDED;
list-style:none;
position:absolute;
left:-1000px;
top:-27px;
width:365px;
height:30px;
border:1px solid #888;
border-left:0;
padding-right:10px;
z-index: 500;
overflow: hidden;
padding-left: 15px;
transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-border-radius: 0 15px 15px 0;
-icab-border-radius: 0 15px 15px 0;
-khtml-border-radius: 0 15px 15px 0;
-moz-border-radius: 0 15px 15px 0;
-webkit-border-radius: 0 15px 15px 0;
border-radius: 0 15px 15px 0;
}

#mintshare_mini:hover .flyout ul{
left:50px;
}

#mintshare_mini .flyout ul li {
float: left;
}

#mintshare_mini .flyout ul li a{

}

#mintshare_mini .flyout ul a img {

}

#mintshare_mini .flyout ul li.drop-li {position:relative; width:35px; height:30px; float:left; z-index:100; margin-top: -2px;}
#mintshare_mini .flyout ul li.drop-li a.drop-a {display:block; width:100px; float:left; text-decoration:none; line-height:16px;}

#mintshare_mini .flyout ul li.drop-li a.drop-a img {display:block; border:0; position:absolute; left:5px; top:5px; z-index:-1; opacity:1; filter: alpha(opacity=100);
transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}

#mintshare_mini .flyout ul li.drop-li a b {background:lightBlue; padding:2px 0; font-family:arial, sans-serif; display:block; width:100px; margin-top:58px; text-align:center; cursor:pointer; color:#000; font-size:14px; opacity:0; filter: alpha(opacity=0);
transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-o-border-radius:10px;
}

#mintshare_mini .flyout ul li.drop-li:hover > a img {opacity:0.5; filter: alpha(opacity=50);}
#mintshare_mini .flyout ul li.drop-li:hover > a b {opacity:1; filter: alpha(opacity=100);}

/* For IE6 */

#mintshare_mini .flyout ul li.drop-li a:hover img {filter: alpha(opacity=50);}
#mintshare_mini .flyout ul li.drop-li a:hover b {filter: alpha(opacity=100);}

/* Get MintShare */

#mintshare_mini .get_mintshare {
font-size: 10px;
margin-left: 5px;
position: relative;
top: 2px;
}

Kemudian Cari Kode <data:post.body/> copy kode berikut dibawahnya :

<div class='note'><div id="mintshare_mini">
<a class="sharetext" href=""><b>Share This</b></a>

<div class="flyout">
<ul class="icons">
<li class="drop-li"><a class="drop-a" expr:href=""http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title" href=""><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZL9K2d5djCTYtju4glTzfyHdHbxdDUxYXqQ6fOAxhyphenhyphendxQPLKyX82st_VZC2HArS2DqmDNzlc-FGx_-0LjhVl0hjCtSPqQ0GnGiSvh-L_ar6CdK2i92E9ewFZKP869ABO4KZB6u7lKY95_/s1600/facebook_small.png" /></a></li>
<li class="drop-li"><a class="drop-a" expr:href=""http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title" href=""><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHD1GxNA5wZ68Z9K1L7lNoP7S_sfzDzHsaJ5wfcVPIs2UkhWMk8x4CP-3AxVAx6RWtk4sK-yWaH3tKF6Akn_zaqC6QY58fu_7u5SUqf9Q-qesxd-z-Wf70g74ypDDEEwXhAVPVq181bmOz/s1600/twitter_small.png" /></a></li>
<li class="drop-li"><a class="drop-a" expr:href=""http://www.stumbleupon.com/refer.php?url=" + data:post.url + "&title=" + data:post.title" href=""><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTlezUsoPOPyMo6XEt5hmKkX6QiJebY5jhPXoshE_NPEOZ2tiV4ULI0vnFUm4suZReubJUEP3pu9311bpBRusBTVdj4e93swNtu9zmqcOrJ9DWowNEb_mK4XRxrj7cgW8h3mMJ3Tde8aYn/s1600/stumbleupon_small.png" /></a></li>
<li class="drop-li"><a class="drop-a" expr:href=""http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title" href=""><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEylwG5GkWxKjm9KhcZqU7fiLkCEJY5AuzvFKqh13mhnvCkaIK-T_VEPBGY5apXOn0w_18CIZj_XTrkkVnSlPU4xBsSJanbte_aa5twQqwtl1AOA2vwu-0YFXRheinrczkZWCGDAgLKT5U/s1600/digg_small.png" /></a></li>
<li class="drop-li"><a class="drop-a" expr:href=""http://www.technorati.com/faves?add=" + data:post.url" href=""><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7KbBDRzhBfM41OV31_OlZM-vSBf-rXZc4zsOMBxL6vBI8ht8CyHCzktrc0um0k3aXaCf3H5a-iRdxdL5n1wa4liItsmNjwBrStGnox76KN_yWPEQB0FxH1uenNo9W9B6Otz6z27O0mkUv/s1600/technorati_small.png" /></a></li>
<li class="drop-li"><a class="drop-a" expr:href=""http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title" href=""><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7jzoOMxnQggC1ywbyPN3DJHxvMCWBKBOJtxFM05dED4rBxaZAJvt040jtHqJwkhhA_Y5rkh10o8OmCV8jcVhAeyqOgz7M8ifMMzhXGXKjIWKBjp9T9IiF0DTkw7-bnxqsDjcSKW4cGwHg/s1600/reddit_small.png" /></a></li>
<li class="drop-li"><a class="drop-a" expr:href=""http://myweb2.search.yahoo.com/myresults/bookmarklet?t=" + data:post.url + "&title=" + data:post.title" href=""><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_c-t6fAPe-H6bfoO2x-gHYrfkvOsYhlBxa0w2lCrEeSlVsBjrjEm9Yi-25HUIDgiFxzQhf4EBSsTs-exY0pdYvzBntGvV32rB8ZUpXrYQMkWvyAooWtweeqdcvOf-LYJG21KvyxwXwpw9/s1600/yahoo_small.png" /></a></li>
<li class="drop-li"><a class="drop-a" expr:href=""http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title" href=""><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTW4bmLzWIGjI9p0Qu0JTnHFo3Cj14pZYjhK18lQzR8ljPIwKTVQJbYRSlK2TLBgg0JahPLdSX_U1GxmuijZRlJ6BglcjeZIu6HQ4q4xs24GOlZKG3x2ib88jlDJRneo4m8SOkKFk7p1Z1/s1600/delicious_small.png" /></a></li>
<span class="get_mintshare"><a href="http://tanpa-isi.blogspot.com/2011/09/membuat-widget-share-menggunakan-css.html">Get This Widget!</a></span> </ul>
</div>
</div>

Silahkan Simpan dan Kreasikan sendiri.
Semoga Cara Membuat Widget Share Menggunakan CSS + HTML Di Blog bermanfaat untuk anda.
Untuk Pilahanya disini tersedia berbagai kreasi, silahkan lihat : http://www.bloggermint.com/2011/01/mintshare-social-bookmarking-sharing-button-widget

Membuat Widget Share Menggunakan CSS + HTML Di Blog

11:51 PM | Diposting oleh Unknown

Kemudian Cari Kode <data:post.body/> copy kode berikut dibawahnya :

Cara Membuat Daftar Isi Overlay Pop Up Blogger

11:45 PM | Diposting oleh Unknown

Cara Membuat Daftar Isi Overlay Pop Up Blogger, Daftar Isi Overlay pada blog, Widget daftar isi banyak dikreasikan oleh shabat blogger, Salah satunya adalah Daftar Isi, Cara ini hampir sama dengan trik pada buku tamu, hanya saja diganti dengan daftar isi supaya lebih keren. mau tau keindahan daftar isi ini ? langsung aja intip yuk :

Kalo sudah silahkan lihat tutorialnya berikut ini :

Login ke Blogger
Rancangan + Edit Html
Kemudian Cari Kode ]]></b:skin>
Letakkan kode berikut diatasnya :

/* the overlayed element */
.apple_overlay {
display:none;
/* growing background image */
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_MxyX1MPvIl2IlZZ0tEQmNbhhYai-rjrKzbiUvuGJ4XikNYdoS9ArkWIZ5MEm6xFMy_9syK306xHShD_qxeQAAT5UENosjiIHL18X-Y7NbPl-7KvxZ7oeOXDcsOqvt9WqXwEgAMBDI86D/s320/transparentbackroundoverlay.png);
/*
width after the growing animation finishes
height is automatically calculated
*/
width:640px;
/* some padding to layout nested elements nicely */
padding:35px;
/* a little styling */
font-size:11px;
}

/* default close button positioned on upper right corner */
.apple_overlay .close {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtSi0s8b0rc6YUVG9k1Qr7Em_LgYUgTF0r1U8HU17O8c73vbadVSLSa6c-l19Wvk9Ns8GjAHMF9IcafMZM6ZcEFwbLnVJvxPpuuxIAFp2oz5-Kx0K4fdyPjDJ3IQLjBc83Vb1Pfipc6FJ4/s1600/close3.png);
position:absolute; right:5px; top:5px;
cursor:pointer;
height:35px;
width:35px;
}

Kemudian Cari kode </head>
copas kode berikut diatasnya :

<script src='http://cayunkatel.googlecode.com/files/jquery.tools.min.js'/>
<link href='http://cayunkatel.googlecode.com/files/apple-overlay.css' rel='stylesheet' type='text/css'/>

Dan Selanjutnya letakkan kode berikut diatas atau sebelum kode </body>

<script>
$(function() {
$("#triggers img[rel]").overlay({effect: 'apple'});
});
</script>

Lalu Save Template.

Kemudian anda menuju Page Element, Pilih Add Widget,--> Html/Javascript -- > Copas code berikut :

<div id="triggers">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqKKdRc2wFuY5NSrFNsSJXjqjzI5E7hYKoYWsqhphmE5i7M2uYGpywH1uAESsMtChpypJXs0z2gVVOU4bJ_5ihSWT8HMYFKu3qpAw1Pwe81WBPJBtFYRYRMTM2ZWk7ZrGvOMW_yV-i7rpC/s320/sitemapcayun.gif" rel="#photo1"/>
</div>


<div class="apple_overlay black" id="photo1">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqKKdRc2wFuY5NSrFNsSJXjqjzI5E7hYKoYWsqhphmE5i7M2uYGpywH1uAESsMtChpypJXs0z2gVVOU4bJ_5ihSWT8HMYFKu3qpAw1Pwe81WBPJBtFYRYRMTM2ZWk7ZrGvOMW_yV-i7rpC/s320/sitemapcayun.gif" />
<div class="details">
<h2>
Izoel's notice</h2>
<p>
<div style="color: #0EFF00;">
<span style="font-size: 15px;"><div style="border: 2px inset #ff0000; overflow: auto; height: 220px;">
<script style="text/javascript" src="http://cayunkatel.googlecode.com/files/daftarisiauto.js"></script>
<script style="text/javascript">
var numposts = 1000;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://tanpa-isi.blogspot.com/feeds/posts/default?
orderby=published&alt=json-in-script&max-results=999
&callback=showrecentposts"></script>
</div>

<div style="text-align: right;">
<a href='http://tanpa-isi.blogspot.com'>CAyun</a>

</div>
</span></div>
</p>
</div>
</div>

<div style="color: black;">
</div>


<script src="http://cayunkatel.googlecode.com/files/latoverlay.js" " type="text/javascript"></script>
<script type="text/javascript">

$(function() {
$("#triggers img[rel]").overlay({effect: 'apple'});
});</script>

<script>

$(function() {
$("#triggers img[rel]").overlay({effect: 'apple'});
});
</script>

Silahkan diedit sesuai keinginan anda.
Lalu Save.

Semoga Cara Membuat Daftar Isi Overlay Pop Up Blogger bermanfaat bagi anda.

Membuat Efek Img Hover Zoom pada semua gambar Posting

11:27 PM | Diposting oleh Unknown

Membuat Efek Img Hover Zoom pada semua gambar Posting

Pada kesempatan kali ini saya ingin memberikan tutorial blogger lagi, setelah lama ngga posting tutor blogger. nah disini saya ingin memosting 'Membuat Efek Img Hover Zoom pada semua gambar Posting' maksud.y disini Image/gambar pada saat disorot, maka akan menimbulkan efek Pembesaran pada gambar..

Trik ini murni dari efek CSS

Jika sobat ingin mencobanya langsung saja ikuti langkah berikut :
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. cari code : .post img{ (Jika tidak ketemu maka letakkan kode berikut diatas kode ]]></b:skin> )
Lalu hapus kode diatas, lalu ganti dengan kode berikut :

.post img{border-radius: 8px; -o-transition: margin-left 1.5s ease-in 2s, margin-top 1.5s 2.5s, -o-transform 1.5s ease-out 1s, opacity 2s ease-in; -moz-transition: margin 1.5s ease-in 2s, -moz-transform 1.5s ease-out 1s, opacity 2s ease-in; -webkit-transition:margin 1.5s ease-in 2s, -webkit-transform 1.5s ease-out 1s, opacity 2s ease-in; opacity: 0.6; transform:rotate(3deg); -moz-transform:rotate(3deg); -webkit-transform:rotate(3deg); -o-transform:rotate(3deg); background:transparent; padding:4px} .post img:hover { opacity: 1.0; -o-transform: rotate(0deg) scale(1.8) translate(35px, 10px); -moz-transform: rotate(0deg) scale(1.8) translate(35px, 10px); -webkit-transform: rotate(deg) scale(1.8) translate(35px, 10px); -o-transition: margin-left 1.5s ease-in 0.1s, margin-top 1.0s, -o-transform 2.5s ease-out 1.4s, opacity 1s ease-in 1s; -moz-transition: margin 1.5s ease-in 0.1s, -moz-transform 1.0s ease-out 1.4s, opacity 1s ease-in 1s; -webkit-transition: margin 1.5s ease-in 0.1s, -webkit-transform 1.0s ease-out 1.4s, opacity 1s ease-in 1s; }

:: Sobat dapat mengedit code CSS diatas sesuka sobat::

5. Terakhir tinggal Save Template sobat,..

cara membuat modifikasi widget profil blogger di blog

Kustomisasi

Membuat Efek Img Hover Zoom pada semua gambar Posting

Kategori