Sabtu, 24 Juni 2017

Cara Lengkap Membuat Gambar Postingan Blog Berputar

Cara Lengkap Membuat Gambar Postingan Blog Berputar

Salam lima jari heheheh,masih sama hansmjlkcommunity sekarang saya akan membahas tentang Cara  Lengkap Membuat Gambar Postingan Blog Berputar  berhubung artikel yang kemarin tidak di terima mbah google terpaksa saya update biar bisa di nikmati oleh para teman semuanya,cukup unik kelihatannya tampilan gambar berputar pada blog ketika mouse menyentuhnya sebagi ciri khas dari perkembangan blog apalagi di iringi dengan pembesaran gambar sambil berputar wow bikin asik ajah kelihatannya.

Memang terkadang jenuh dengan tampilan blog yang serba sederhana seakan tidak ada kreasi untuk memberikan tampilan yang sedemikian indah untuk memuaskan para pengunjung blog,nah buat kalian biar tidak merasa jenuh dengan tampilan blognya silahkan di coba coba siapa tau cocok karena saya rasa gampang banget caranya juga,untuk lebih jelasnya kita langsung saja ke TKP.

1. Seperti biasa kalian login ke akun blog.
2. Pilih menu Template > Edit HTML ( centang expand widget templates ).
3. Cari kode ]]></b:skin> kemudian copy kode di bawah dan pastekan di atas kode tersebut.



a img, img{-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}a img:hover, img:hover{border:2px solid; -webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px; 
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;-o-transform:scale(1.2) rotate(360deg) translate(0px);-moz-transform:scale(1.2) rotate(360deg) translate(0px);-webkit-transform:scale(1.2) rotate(360deg) translate(0px);-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}


4. Terakhir save dan lihat hasillnya.


Itulah tutorial yang bisa saya sampaikan pada pertemuan kali ini tentang Cara Lengkap Membuat Gambar Postingan Blog Berputar semoga ada manpaatnya buat semuanya.
Read more ...

Cara Lengkap Membuat Kotak Komentar Facebook Di Blog

Cara Lengkap Membuat Kotak Komentar Facebook Di Blog

Salam semuanya...jumpa kembali bareng hansmjlkcommunity pada kesempatan ini saya akan coba sedikit mengulas Cara Lengkap Membuat kotak Komentar Facebook Di Blog,banyak yang mengomentari atas artikel artikel yang kita buat akan menjadikan motivasi untuk lebig giat dalam pembuatan artikel baru,namun kadang orang yang awam merasa sulit untuk memberikan komentarnya nah oleh karena itu alngkah baiknya bila di pasang kotak komentar facebook untuk lebih mempermudah pengunjung berkomentar.

Memberikan kemudah dengan cara memasang kotak komentar facebook yang berdampingan dengan kotak komentar blog akan sedikit memberikan keunikan dan besar kemungkinan akan meningkatkan traffic pengunjung karena dengan mudahnya bisa berkomentar lewat facbook.Buat kalian yang penasaran seperti apa sih kotak komentar facebook itu silahkan lihat caranya di bawah ini.


1. Login ke akun log kalian.
2. Pilih menu Template > Edit HTML ( Centang Expand Widget Temapltes ).
3. Cari kode ]]></b:skin> (gunakan CTRL+F untuk mempermudah pencarian kode).
4. Copy kode di bawah dan pastekan di atas kode ]]></b:skin>

.comments-page { background-color: #f2f2f2;}
    #blogger-comments-page { padding: 0px 5px; display: none;}
    .comments-tab { float: left; padding: 5px; margin-right: 3px;
    cursor: pointer; background-color: #f2f2f2;}
    .comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
    .comments-tab:hover { background-color: #eeeeee;}
    .inactive-select-tab { background-color: #d1d1d1;}


5. Cari kembali kode </head> kemudian copy kode di bawah dan pastekan tepat di atas kode tersebut.


<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
    <script src='http://code.jquery.com/jquery-latest.js'/>
    <meta content='ID FP Anda disini' property='fb:admins'/>
    <script type='text/javascript'>
    function commentToggle(selectTab) {
    $(".comments-tab").addClass("inactive-select-tab");
    $(selectTab).removeClass("inactive-select-tab");
    $(".comments-page").hide();
    $(selectTab + "-page").show();
    }
    </script>

Keterangan :
Ganti tulisan yang berwarna Hijau dengan ID Fans Page kalian,untuk mendaptkan ID Fans Page kalian buka facebook kemudian klik halaman blog copy kodenya yang di browsur (lihat gambar) dalam hal ini kalian cukup copy kode angkanya saja kurang lebih 15 hurup contoh 394963703943934


6. Cari kembali kode <div class='comments'id='comments'>,pada umumnya kode tersebut ada dua maka kalian pilih yang kedua
7. Selanjutnya copy kode di bawah dan letakan setelah kode <div class='comments'id='comments'> yang kedua.


 <div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
    <img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
    <fb:comments-count expr:href='data:post.url'/> Comments
    </div>
    <div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
    <img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
    </div><div class='clear'/>
    </div>
    <div class='comments-page' id='fb-comments-page'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='fb-root'/>
    <fb:comments expr:href='data:post.url' num_posts='10' width='400'/>
    </b:if>
    </div>
    <div class='comments comments-page' id='blogger-comments-page'>

Keterangan

  • Angka 10 menunjukan jumlah komentar facebook yang tampil di blog.
  • Angka 400 menunjukan lebar kolom komentar facebook.
  • Untuk tulisan yang terakhir <div class='comments comments-page'id='blogger-comments-page'> silahkan hapus jika kode tersebut sudah ada.

Demikian tutorial kali ini yang bisa saya sampaikan tentang Cara Lengkap Membuat Kotak Komentar Facebook Di Blog semoga dapat membantu sobat semuanya dan saya ucapkan terima kasih atas kunjungannya.
Read more ...

Cara Membuat Link Berkedip Bintang Saat Di Sentuh Mouse

Cara Membuat Link Berkedip Bintang Saat Di Sentuh Mouse

Salam semuanya hansmjlkcommunity kembali akan sedikit mengulas tentangCara Membuat Link Berkedip Bintang Saat Di Sentuh Mouse,memang tidak ada habisnya memodifikasi tampilan blog demi menciptakan blog yang lebih bagus namun banyak keluhannya dengan menampilkan berbagai macam efek akan berdampak pada loading blog,namun kalian tidak usah risau tampilan link berkedip ini cukup ringan jadi tidak akan berdampak pada loading blog berat.

Mempunyai keindahan tersendiri ketika mouse mendekati link maka percikan bintang akan keluar itulah yang akan kalian nikmati jika menerapkan kode link berkedip bintang yang telah saya siapkan,sebagai salah satu contoh bisa kalian lihat pada blog saya yang super hancur ini hehehehe,penasaran nih seperti apa sih bintang berkedip itu maka silahkan lihat tutorialnya di bawah ini.

1. Login dulu ke akun blog kalian.
2. Pilih menu Template > Edit HTML ( Centang Expand Widget Templates ).
3. Cari kode </head> kemudian copy kode di bawah dan pastkena tepat di atas kode </head>.


<style>
a:hover { text-decoration:blink;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzwTxaBsqeMWIJkd-65t-poDjS68k0CY21zjPqeZ5_rlbOO8lodHLn94gzmMiXwvTMe2mjgUd8zuaovS9PtQqMkrPMqjiDuklb8GHZ-w8sPE6Qe-IVMZfylgu1H8WwVPhEXjInBlqn0q8/s1600/hansmjlkcommunity.gif); }
</style>


4. Kemudian save dan silahkan lihat hasil kerja kalian.

Jika kalian berhasil maka akan menghasilkan percikan bintang seperti di bawah ini.


Demikian tutorial yang bisa saya berikan tentang Cara Membuat Link Berkedip Bintang Saat Di Sentuh Mouse semoga dapat bermanpaat buat semuanya.

Read more ...

Formulir Kontak

Nama

Email *

Pesan *

 
Massachusetts Bee Gees
agil bymail. Diberdayakan oleh Blogger.

Recent Posts

agilbymail.com | Template Agil by mail © 2010 Free Template Ajah. Distribution by Agilbymail Template. Supported by :):):) and Info