-->
Home » Penelusuran template hack

Membuat Emoticon di Kotak Komentar Blogspot

Cara Membuat Emoticon di Kotak Komentar Blogspot - Sahabat blogger, hampir seminggu ini bang dadan tidak membuka blog, rasanya kangen ingin cepat - cepat membuat tulisan, nah pada kesempatan kali ini alhamdulillah bang dadan bisa kembali membuat postingan lagi, kali ini bang dadan akan coba membhasa artikel tentang Membuat Emoticon di Kotak Komentar Blogspot.

emoticon komentar blog

sahabat blogger mungkin pernah bahkan sering melihat sebuah komentar para blogger yang ada emoticon nya,  ini merupakan suatu design saja agar tampilan komentar pada blog kita menjadi lebih menarik dan lebih unik, jika sobat ingin melihat demonya silahkan sobat lihat gambar dibawah ini, atau pada komentar blog ini.

Baiklah tidak usah panjang lebar lagi, langsung saja kita menuju TKP :

Cara Membuat Emoticon di Kotak Komentar Blogspot
1. Login ke blog
2. Masuk ke dasbor/rancangan kemudina pilih Template
3. Pilih Edit HTML *jangan lupa centang expand template widget
4. Cari kode ]]></b:skin>
5. Copy kode dibawah ini dan pastekan diatas ]]></b:skin>
.emoWrap {color:greenyellow;font:bold 12px Tahoma,Arial,Sans-Serif;text-align:center;}
img.emo, input.emoKey {display:inline-block;display:inline;vertical-align:middle;}
input.emoKey {border:1px solid #ccc;background-color:white;font:bold 11px Arial,Sans-Serif;padding:1px 2px;margin:0px 0px 0px 2px;color:black;}

6. Copy kode dibawah ini dan pastekan dibawah tag <b:if cond='data:post.embedCommentForm'> atau pastekan diatas tag </body>

 Berikut kodenya:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/><script src='http://codecbd.googlecode.com/files/emotion-coment.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var emoRange = "#comments p, div.emoWrap",
putEmoAbove = "iframe#comment-editor",
emoMessage = "Beri spasi sebelum memasang emoticon.";
//]]>
</script>
Keterangan: jika dalam template sobat sudah ada kode yang berwarna merah di atas, sobat tidak usah memasang nya lagi.

7. Selanjutnya klik Simpan Template selesai

Silahkan sobat coba berkomentar di blog sendiri dan beri emoticon, dan lihat hasilnya..!!
Sekian dulu pembahasan kita kali ini tentang Cara Membuat Emoticon di Kotak Komentar Bogspot, dan semoga artikel ini bermanftaat buat anda semua, selamat mencoba dan semoga sukses..!!

Cara Membuat Tombol Next Page Dengan Angka

Tombol Next Page Dengan Angka
Cara Membuat Tombol Next Page Dengan Angka - Sahabat blogger pada kesempatan pagi yang cerah ini bang dadan akan membuat artikel tentang Cara Membuat Tombol Next Page Dengan Angka. Tombol next page ini sama fungsinya dengan tombol next page, previous, dan home yang terdapat pada bagian bawah postingan, namun yang satu ini kita merubah itu semua dengan angka, tujuan nya agar para pengunjung lebih mudah menjelajahi isi daripada blog kita.
Oke langsung saja bagi sobat yang ingin melihat DEMO nya silahkan sobat lihat pada bagian bawah blog ini, dan contoh nya silahkan sobat perhatikan gambar dibawah ini:

Tombol Next Page Dengan Angka
Cara Membuat Tombol Next Page Dengan Angka
  1. Login ke blog
  2. Masuk ke dasbor dan klik template => pilih Edit HTML
  3. Backup Dulu Template anda dengan meng Klik Download Full Template (Terserah anda Ya atau Tidak.tapi lebih baik Ya)
  4. Centang Expand Template Widget
  5. Cari Kode ]]></b:skin> Copy kode di bawah lalu paste di atas kode ]]></b:skin>
.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;}

7. Selanjutnya cari kode </body>
8. Copy lalu paste kode di bawah ini tepat si atas kode </body>

<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord='Previous';
var downPageWord='Next';
</script>
<script src='http://codecbd.googlecode.com/files/page-no.js' type='text/javascript'/>

9. klik pratinjau untuk memastikan terjadinya kesalahan
10. Apabila sudah oke dan silahkan sobat klik simpan template
11. Selesai

Sekian dulu pembahasan kita kali ini tentang Cara Membuat Tombol Next Page Dengan Angka, Apabila ada yang ingin ditanyakan silahkan tinggalkan pesan pada kotak komentar. 
Terimakasih, selamat mencoba dan semoga bermanfaat..!!!

Cara Membuat Komentar Blog, Facebook, dan Twitter Berdampingan

Cara Membuat Komentar Blog Facebook Twitter Berdampingan - Sahabat blogger, pada pembahasan yang lalau bang dadan pernah membuat artikel tentang cara membuat recent comment avatar di blog, nah untuk pembahasan kali ini bang dadan akan coba membuat artikel tentang Cara Membuat Komentar Blog Facebook Twitter Berdampingan.

Terkadang pengunjung yang datang ke blog kita tidak semuanya mempunyai akun blog. dan kalau mereka ingin berkomentar di blog kita mungkin akan kesulitan bila tidak mempunyai gmail, namun mereka pasti mempunyai salah  satu akun baik di Facebook atau  di Twitter, oleh karena itu mereka bisa berkomentar melaui situs jejaring sosial tersebut.

Sahabat blogger, mungkin tutorial seperti ini mungkin sudah banyak di share oleh sahabat blogger yang lain, namun bang dadan coba share kembali siapa tahu aja ada para pengunjung blog cbd yang belum tahu caranya. dan bagi sobat yang ingin meliihat DEMO nya silahkan lihat saja pada kotak komentar dibawah blog ini.

Kotak Komentar Blog Facebook Twitter Berdampingan

Oke kalau begitu kita langsung saja pada tahap pembahasan:

Cara Membuat Komentar Blog, Facebook, dan Twitter Berdampingan
Sebelum sobat menerapkannya pada blog sobat, terlebih dahulu sobat harus mempunyai tiga ID sebagai berikut:
  • PROFIL_ID (Facebook)
  • APP_ID (Facebook)
  • API_Key (Twitter)
Kalau sobat belum mempunyai atau belum mengetahui ID di atas silahkan ikuti langkahnya dibawah ini:
1. Profile_ID adalah ID account facebook kamu contohnya punya saya "http://www.facebook.com/dadan.dr" jadi Profile_ID saya adalah "dadan.dr"

2. APP_ID adalah ID dari aplikasi yang akan kita gunakan untuk kotak komentar facebook, yang belum punya silahkan buat disini

3. APP_Key adalah ID dari aplikasi yang akan kita gunakan untuk kotak komentar twitter, yang belum punya silahkan buat disini

Nah jika semua sudah siap, mari kita mulai bahas cara pemasangan nya pada blog

Cara Pemasangan Pada Blog
1. Silahkan masuk ke akun Blog
2. Masuk ke dasbor/rancangan
3. Pilih Template kemudian Klik Edit HTML
*Jangan lupa centang expand template widgate
*Alangkah baiknya jika soba backup template terlebih dahulu, untuk berjaga-jaga.
4. Cari kode <head> kemudian copy kode berikut ini dan taruh dibawah tag <head>

Berikut Kodenya

<meta content='Profile_ID' property='fb:admins'/>
<meta content='APP_ID' property='fb:app_id'/>
<script src='http://code.jquery.com/jquery-latest.pack.js'/>
<script src='http://codecbd.googlecode.com/files/CommentPages.js'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://codecbd.googlecode.com/files/TweetBox.js'/>
<script src='http://platform.twitter.com/anywhere.js?id=API_Key&amp;v=1'/>

Keterangan:
Silahkan ganti tulisan yang berwarna biru dengan Data ID sobat masing-masing. sesuai panduan diatas.

5. Masih di Edit HTML, Kemudian sobat cari lagi kode berikut class='comments' biasanya terdapat 2 kode tersebut, kalau sudah ketemu copy kode berikut ini dan simpan dibawah kedua tag class='comments'.

Berikut Kodenya

<div class='comments-tab' id='blogger-comments' title='Comments from Blogger'>
<data:post.numComments/> Comments
</div>
<div class='comments-tab' id='twitter-comments' title='Comments with Twitter'>
<span class='js-page-tweet-count' expr:href='data:post.url'/> Tweets
</div>
<div class='js-default-tab comments-tab' id='fb-comments' title='Comments made on Facebook'>
<fb:comments-count expr:href='data:post.url'/> Komentar
</div>
<div class='clear'/>
</div>
<div class='comments-page' id='twitter-comments-page'>
<div id='js-tweet-box'/>
</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='500'/>
  </b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

6. Klik simpan template
7. Selesai

Nah, mungkin cm itu pembahasan kita kali ini tentang Cara Membuat Komentar Blog Facebook Twitter Berdampingan. apabila sobat masih belum paham, silahkan tinggalkan pertanyaan sobat pada kotak komentar dibawah.
Akhir kata bang dadan ucapkan, selamat mencoba dan semoga sukses..!!

Menambah Widget 2 Kolom dibawah Header

Cara Menambah Widget 2 Kolom dibawah Header - Sahabat blogger pada postingan yang lalu bang dadan telah membuat artikel tentang Cara Menambah Widget 1 Kolom dibawah Header, nah pada kesempatan kali ini bang dadan akan membahas bagaimana Cara Menambah Widget 2 Kolom dibawah Header, tutorial kali ini hampipr sama dengan yang sebelumnya hanya saja pada postingan kali ini kita membuat elemnet nya 2 kolo dibawah header, mungkin sudah pada mengerti apa yang saya maksudkan.

Menambah Widget 2 Kolom dibawah Header

Oke langsung saja pada tahap pembuatan:

Cara Menambah Widget 2 Kolom dibawah Header
1. Login ke blog.
2. Masuk ke dasbor dan Klik tata letak atau layout.
3. Kemudian Pilih Edit HTML.
4. Sebelum memulai pengeditan alangkah baiknya anda sekalian backup template terlebih dahulu.
5. Selanjutnya cari kode ]]></b:skin>, agar lebih mudah anda bisa menekan Ctrl + F, kemudian copy dan paste kode berikut tepat diatas ]]></b:skin>
#dua-kolom-dibawah-header {
clear:both;
}
.dua-kolom {
}
6. Kemudian car lagi kode <div id='main-wrapper'> lalu copy kode dibawah ini tepat di atas <div id='main-wrapper'>

</div>
<div id='dua-kolom-dibawah-header'>
<div id='kolom1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='dua-kolom' id='kolom1' preferred='yes' style='float:left;'/>
</div>
<div id='kolom2' style='width: 50%; float: right; margin:0; text-align: left;'>
<b:section class='dua-kolom' id='kolom2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

7. Selanjutnya klik Simpan Template
Selesai, silahkan sobat lihat perubahan nya.

Sekian dulu pembahasan kita kali ini tentang Cara Menambah Widget 2 Kolom dibawah Header, semoga artikel ini bermanfaat bagi anda semua, tunggu postingan selanjutnya tentang Cara Menambah Widget 3 Kolom dibawah Header. Comming soon..!!!
Hatur Nuhun..!!

Cara Membuat Frame Live Demo di Blog

Cara Membuat Frame Live Demo di Blog
Cara Membuat Frame Live Demo di Blog - Sahabat blogger, pada kesempatan kali ini bang dadan akan coba membahas artikel tentang Cara Membuat Frame Live Demo di Blog, sahabat blogger mungkin sering atau pernah menemukan live demo ini misalnya pada blog penyedia template gratis, biasanya  ketika kita hendak mendownload template tersebut kita bisa melihat dulu template yang nanti akan di download dalamnya seperti apa, ketika kita klik demo otomatis kita dibawa pada template yang akan kita download nanti. namuun tetap dalam url blog tersebut tidak langsung pada url demo template, dan biasanya live demo ini mempunyai navbar/menu horizontal diatas blog tersebut.
Ketika kita hendak membuat live demo ini salah satu pendukung adalah laman/pages, ruang laman itulah yang nantinya dipake buat demo tersebut.
Oke langsung saja bagi sobat yang ingin mencoba memasang live demo diblog nya silahkan ikuti langkah-langkahnya berikut:

Cara Membuat Frame Live Demo di Blog
1. Pertama sobat harus membuat laman terlebih dahulu pada blog dengan URL berikut http://blogkamu.blogspot.com/p/demo.html
2. Selanjutnya cari kode </head> lalu copy kode dibawah ini tepat diatas </head>:

<!-- Demo Style Blogger Template -->
<b:if cond='data:blog.url == &quot;http://blogkamu.blogspot.com/p/demo.html&quot;'>
<script src='http://codecbd.googlecode.com/files/jquery-1.js' type='text/javascript'/>
<script src='http://codecbd.googlecode.com/files/iframe.js' type='text/javascript'/>

<style type='text/css'>
a{outline-style:none; color:#0696cb; font-size:11px;text-decoration:none;}
#navbar-iframe{display:none}
html, #iframe{overflow: hidden;}
/* iframe */
#iframe, iframe{position: absolute; width: 100%; height: 100%; border:none;}
#iframe{margin-top:31px;}


/*-- DROPDOWN MENU --*/
.likefb, .google_plus, .twitter{float:left;margin:0 3px 0 0 !important;padding:4px 0 0 1px; }
.likefb {width:90px !important;}
.google_plus {width:63px !important;}
.twitter {width:95px !important;}
#toolbar {position:fixed; top:0;left:0; width: 100%; height:30px !important; margin: 0; padding:0; z-index:50}
#nav-menu-label{float:right; margin:0px; padding:0px; }
.text-style{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJA-wxErnYbbkZC9hgDSSPt6N6j7v6n_DUNkxw2RZHzgoXXprtu6vXp28Tb908MAQp2go6nsUrVMb6pUtp-q6vc6SRC3SR-Hz5EWUa4O-pzzRoo3ARnE9F6tffiNiQJwZGgokwEs_1gaM/s200/bc_separator.png) no-repeat;color:#333; display:block; font-size:12px; font-family:arial,verdana,georgia; font-weight:normal; text-transform:normal; margin:0; border-left:0px solid #CDCDCD; padding:8px 4px 8px 14px; height:14px }
.text-style:hover{color:#FF6600; cursor:pointer;height:14px}
/*-- (Menu Nav LABEL) --*/
#nav-menu-label{float:right; margin:0px; padding:0px}
#nav-menu-label ul{float:left; list-style:none; margin:0px; padding:0px}
#nav-menu-label li{list-style:none; margin:0px; padding:0px}
#nav-menu-label li a, #nav-menu-label li a:link, #nav-menu-label li a:visited{color:#333; display:block; font-size:12px; font-family:arial,verdana,georgia; font-weight:normal; text-transform:normal; margin:0px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJA-wxErnYbbkZC9hgDSSPt6N6j7v6n_DUNkxw2RZHzgoXXprtu6vXp28Tb908MAQp2go6nsUrVMb6pUtp-q6vc6SRC3SR-Hz5EWUa4O-pzzRoo3ARnE9F6tffiNiQJwZGgokwEs_1gaM/s200/bc_separator.png) no-repeat ; padding:8px 3px 6px 14px}
#nav-menu-label li a:hover, #nav-menu-label li a:active{color:#FF6600; margin:0px; padding:8px 3px 6px 14px; text-decoration:none}
#nav-menu-label li li a, #nav-menu-label li li a:link, #nav-menu-label li li a:visited{background:#f5f5f5; width:90px; color:#333; font-size:11px; font-family: arial,Times New Roman; font-weight:normal; text-transform:normal; float:none; margin:0px; padding:4px 10px 4px 10px; border-top:1px solid #fff; border-bottom:1px solid #CDCDCD;border-left:1px solid #CDCDCD; border-right:1px solid #CDCDCD}
#nav-menu-label li li a:hover, #nav-menu-label li li a:active{background:#fff; color:#FF6600; padding:4px 10px 4px 10px}
#nav-menu-label li{float:left; padding:0px}
#nav-menu-label li ul{z-index:999; position:absolute; left:-999em; height:auto; width:100px; margin:0px; padding:0px}
#nav-menu-label li li{}
#nav-menu-label li ul a{width:100px}
#nav-menu-label li ul a:hover, #nav-menu-label li ul a:active{}
#nav-menu-label li ul ul{margin:-31px 0 0 100px}
#nav-menu-label li:hover ul ul, #nav-menu-label li:hover ul ul ul, #nav-menu-label li.sfhover ul ul, #nav-menu-label li.sfhover ul ul ul{left:-999em}
#nav-menu-label li:hover ul, #nav-menu-label li li:hover ul, #nav-menu-label li li li:hover ul, #nav-menu-label li.sfhover ul, #nav-menu-label li li.sfhover ul, #nav-menu-label li li li.sfhover ul{left:auto}
#nav-menu-label li:hover, #nav-menu-label li.sfhover{position:static}
/* -- SEARCR BOX -- */
#src-bar{border:1px solid #C9D7F1;  height:18px; width:130px; padding:0;  background:#f6f4f4;  }
#src-bar input{border:0;  background:none;  color:#575757}
#s-bar{font-size:11px; width:120px; padding-left:4px;  margin:0;  background:none}
#tsrc-bar #src-bar{margin-top:0px;-moz-border-radius-bottomleft:3px;-moz-border-radius-bottomright:3px;-moz-border-radius-topleft:3px;-moz-border-radius-topright:3px;background-color:#FFFFFF;border:1px solid #CDCDCD;}
#tsrc-bar #s-bar{width:105px}

#mta_bar{background:#E7E7E7 url(http://3.bp.blogspot.com/_C6KkooKXCEw/TUP2QV3Ut4I/AAAAAAAAH5w/MYcoSss0M28/s400/bg.png) repeat-x;      overflow: hidden; padding-top:0px; width:100%; height:30px;display:block; border-bottom:1px solid #cdcdcd}
#mta_bar .bar_logo{float:left;  padding-left:8px; text-align:left; font-family:Arial; font-size:15px; font-weight:bold; font-style:normal; color:#333; width:148px; padding-top:7px}
#mta_bar .bar_logo a{background:url(https://dev.twitter.com/sites/all/themes/twitter_commons/favicon.ico) 0px no-repeat; text-decoration:none; color:#333; padding-left:21px; }
#mta_bar .bar_logo a:hover{text-decoration:underline; color:#FF6600}
#mta_bar .bar_search{float:left;  padding-top:5px; margin:0px; text-align:left; font-family:tahoma; font-weight:bold; font-style:normal; color:#333; width:140px}
#mta_bar .bar_search a{text-decoration:none; color:#333; padding-left:10px; padding:0}
#mta_bar .bar_search a:hover{text-decoration:underline; color:#FF6600}
#mta_bar .bar-menu-label{float:right; text-align:left; font-family:tahoma; font-size:13px; font-weight:normal; font-style:normal; color:#333; width:520px; padding:0px}
#mta_bar .bar-menu-label a{text-decoration:none}
#mta_bar .bar-download{float:left;  text-align:left; font-family:arial; font-size:13px; font-weight:normal; font-style:normal; color:#333; padding:6px 3px; width:65px}
#mta_bar .bar-download a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzIU-DUTtaAW_AmwA79-5pTnc1OA6xLATdqcVJumQTs1x6gppqPG5H9wwmgROdeafTfClOLibx2QyeQhLqJToqdC1BkigTdRIlyjzKMvGISrnhS859JbDE4ngi4K0rK0y4X0BKgaROuVk/s200/submit-c.png) 0px no-repeat; text-decoration:none; color:#333; padding-left:17px; }
#mta_bar .bar-download a:hover{text-decoration:underline; color:#FF6600}
#mta_bar .bar_hide{float:right;  text-align:left; font-family:arial; font-size:13px; font-weight:bold; font-style:normal; color:#333; padding:7px 0 0 5px; width:20px}
#mta_bar .bar_hide a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie8RuBdBekkjr1mx2qKaLcB0bA9uo4k5acK1xl_8-0JQkpu-tOTaDm2c3OMvuqPDUXqGwooLCNJuc-jNzWkRBMb7o08WNVmTLZi3WdFGqK8Glt39izcWGKhgFmqnlmMlq9aNu61kCPTwpf/s400/delete.png)  no-repeat; text-decoration:none; color:#333; padding-left:20px; }
#mta_bar .bar_hide a:hover{text-decoration:underline; color:#FF6600}
#mta_bar .bar_fb {float:left; width:70px;padding-top:6px; padding-left:2px; margin:0px;}
</style>
</b:if>

3. Selanjutnya cari kode <body>, taruh kode berikut ini tepat dibawah <body>

<b:if cond='data:blog.url != &quot;http://blogkamu.blogspot.com/p/demo.html&quot;'>
4. Setelah itu cari lagi kode </body>, dan copy kode berikut tepat diatas kode </body>

</b:if>
<b:if cond='data:blog.url == &quot;http://blogkamu.blogspot.com/p/demo.html&quot;'>
    <div id='toolbar'>
        <div id='mta_bar'>
                    <div class='mta_bar bar_logo'>
                        <a expr:href='data:blog.homepageUrl'><data:blog.title/></a>
                    </div>
                    <div class='mta_bar bar_search'>
                        <div id='tsrc-bar'>
                            <div id='src-bar'>
                                <form action='http://www.zoomtemplate.com/search' id='searchform' method='get' name='searchform'>
                                    <input class='keyword' id='s-bar' name='s' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search Template..&quot;;}' onfocus='if (this.value == &quot;Search Template..&quot;) {this.value = &quot;&quot;}' type='text' value='Search Template..'/>
                                    <input src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN3xvjkaKyxYroU62OEH7HOpkIp4hKIIPiynsW8Be_K61JYlOMtNhsMn1QZNxsZszZ4DdgiVRwq06vzkNytL6PkPHltCyBMiR0uK39Y_yqspdZmWDbIaNkjZhGfwrm2EcBU2PYI_UmUEc/s200/search-c.png' style='border: 0pt none ; vertical-align: top; padding-top:3px' type='image'/>
                                </form>
                            </div>
                        </div>
                    </div>
                 
                    <div class='mta_bar bar-download'>
                        <a href='http://box.zoomtemplate.com/?dl=' rel='nofollow'>Download</a>  
                    </div>
                   
                    <div class='mta_bar bar_hide'>
                        <a href='javascript:void(0);' id='close'/>
                    </div>  


                    <div class='mta_bar bar-menu-label'>
                        <div id='NavbarMenuleft'>      
                            <ul id='nav-menu-label'>
                                <li>
                                    <div class='text-style'>Coloums &#9660;</div>
                                    <ul>
<li><a href='#'>Style</a></li>
                                        <li><a href='#'>Style</a></li>
                                        <li><a href='#'>Style</a></li>
                                        <li><a href='#'>Style</a></li>
                                        <li><a href='#'>Style</a></li>
                                        <li><a href='#'>Style</a></li>
                                        <li><a href='#'>Style</a></li>
                                    </ul>
                                </li>
                               
                                <li>
                                    <div class='text-style'>Sidebars &#9660;</div>
                                    <ul>
                                        <li><a href=''>1 Left Sidebar</a></li>
                                        <li><a href=''>2 Left Sidebar</a></li>
                                        <li><a href=''>1 Left Sidebar</a></li>
                                        <li><a href=''>2 Left Sidebar</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <div class='text-style'>Colors &#9660;</div>
                                    <ul>
                                        <li><a href='#'>Black</a></li>
                                        <li><a href='#'>Blue</a></li>
                                        <li><a href='#'>Brown</a></li>
                                        <li><a href='#'>Green</a></li>
                                        <li><a href='#'>Gray</a></li>
                                        <li><a href='#'>Orange</a></li>
                                        <li><a href='#'>Pink</a></li>
                                        <li><a href='#'>Red</a></li>
                                        <li><a href='#'>Violet</a></li>
                                        <li><a href='#'>White</a></li>
                                        <li><a href='#'>Yellow</a></li>
                                    </ul>
                                </li>
                               
                                <li>
                                    <div class='text-style'>Styles &#9660;</div>
                                    <ul>
                                        <li><a href='#'>Style</a></li>
                                        <li><a href='#'>Style</a></li>
                                        <li><a href='#'>Style</a></li>
                                        <li><a href='#'>Style</a></li>
                                        <li><a href='#'>Style</a></li>
                                        <li><a href='#'>Style</a></li>
                                        <li><a href='#'>Style</a></li>
                                    </ul>
                                </li>
                               
                                <li>
                                    <div class='text-style'>Topics &#9660;</div>
                                    <ul>
                                        <li><a href='#'>Style</a></li>
                                        <li><a href='#'>Style</a></li>
                                        <li><a href='#'>Style</a></li>
                                        <li><a href='#'>Style</a></li>
                                        <li><a href='#'>Style</a></li>
                                        <li><a href='#'>Style</a></li>
                                        <li><a href='#'>Style</a></li>
                                    </ul>
                                </li>
                                   
                                <li>
                                    <div class='text-style'>Features &#9660;</div>
                                    <ul>
                                        <li><a href='#'>Style</a></li>
                                        <li><a href='#'>Style</a></li>
                                        <li><a href='#'>Style</a></li>
                                        <li><a href='#'>Style</a></li>
                                        <li><a href='#'>Style</a></li>
                                        <li><a href='#'>Style</a></li>
                                        <li><a href='#'>Style</a></li>
                                    </ul>
                                </li>
                               
                                <li>
                                    <div class='text-style'>Width &#9660;</div>
                                    <ul>
                                        <li>
                                            <a href='#'>Fixed</a>
                                        </li>
                                        <li>
                                            <a href='#'>Fluid</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>  
                    </div>
                </div>
            </div>
<div style='clear: both;'/>
<div id='iframe'><iframe src=''/></div>
</b:if>

Keterangan:

  • Silahakn anda ganti tulisan yang berwarna merah dengan URL Blog sobat masing-masing.
  • Kode yang berwarna biru merupakan menu horizontal, silahkan sobat edit sesuka hati.

Nah mungkin sekian dulu pembahasan kita kali ini tentang Cara Membuat Frame Live Demo di Blog, semoga artikel ini bermanfaat buat anda semua. terimakasih..!!

Menambah Element 1 Kolom Dibawah Header

Cara Menambah Element 1 Kolom Dibawah Header - Sahabat blogger, pada kesempatan yang lalu bang dadan telah membuat artikel tentang Cara Menambah Widgate Horizontal dibawah Header, fungsi element widgate itu biasanya digunakan untuk membuat Slider/Slide Show Gambar, karena widgate tersebut sengaja dibuat hanya tampil pada homepage saja. namun pada kesempatan kali ini bang dadan akan membaha artikel tentang Cara  Menambah Element 1 Kolom Dibawah Header, dan yang ini bisanya digunakan untuk membuat menu navigasi Horizontal, banner iklan dll.

Menambah Element 1 Kolom Dibawah Header
klik gambar untuk memperbesar

Bagi sobat yang mau mencoba tutorial ini silahkan ikuti langkah - langkahnya dibawah ini:

Cara Menambah Element 1 Kolom Dibawah Header
1. Login ke blog.
2. Masuk ke dasbor dan Klik tata letak atau layout.
3. Kemudian Pilih Edit HTML.
4. Sebelum memulai pengeditan alangkah baiknya anda sekalian backup template terlebih dahulu.
5. Selanjutnya cari kode ]]></b:skin>, agar lebih mudah anda bisa menekan Ctrl + F, kemudian copy dan paste kode berikut tepat diatas ]]></b:skin>
#satu_kolom{
margin:10px 0;
padding:1%;
width:98%;
}

6. Selanjutnya Copy kode berikut:
<div id="satu_kolom">
<b:section class='header' id='satukolomajah' preferred='yes'/>
</div>

7. Setelah itu simpan dibawah kode ini:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidget="1" showaddelement="no">
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/></b:section>
</div>
8. Kemudian Simpan template
9. Selesai !! Lihat perubahan nya pada tata letak anda.

Nah mungkin cukup sekian dulu pembahasan kita kali ini tentang Cara Menambah Element 1 Kolom Dibawah Header, Semoga artikel ini bermanfaat bagi anda semua. dan nantikan artikel selanjutnya tentang Cara Menambah Element 2 Kolom Dibawah Header. Comming soon..!!!

Cara Membuat Related Post Dengan Thumbinal

Cara Membuat Related Post Dengan Thumbinal - Sahabat blogger setelah sebelumnya bang dadan membahas Cara Membuat Related Posts/Artikel Terkait dengan Icon, nah  kali ini bang dadan akan coba membahas Cara Membuat Related Post Dengan Thumbinal, Related Post atau Artikel Terkait mungkin sangat berguna dalam blog, biasanya related post di gunakan dalam satu kategory atau lebih, related post/artikel terkait ini adalah artikel yang berhubungan atau yang berkesinambungan dengan artikel yang sedang dibaca oleh para pengunjung.

Membuat Related Post Dengan Thumbinal

Baiklah kalau sobat ingin Membuat Related Post Dengan Thumbinal, silahkan ikuti langkah-langkahnya dibawah ini:

Cara Membuat Related Post Dengan Thumbinal
1. Login ke Blog
2. Masuk ke dasbor dan pilih template
3. Klik edit HTML *Jangan lupa centang expand template widgate
4. Cari kode </head> copy kode dibawah ini dan simpan tepat diatas </head>
<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.3em;
font-weight: bold;
color: #000000;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#000000;
}
#related-posts a:hover{
color:#000000;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://codecbd.googlecode.com/files/relatedthumbs.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

5. Kemudian cari lagi kode <div class='post-footer'> atau <div class='post-footer-line post-footer-line-1'/> 6. Kalau sudah ketemu copy kode dibawah ini tepat di atas kode <div class='post-footer'> atau <div class='post-footer-line post-footer-line-1'/>  Pilih saja salah satu. 

Berikut kodenya:

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=6;
var relatedpoststitle=&quot;Baca juga Artikel Terkait yang mungkin anda cari&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

Keterangan:
var maxresults=6;  adalah jumlah artikel terkait yang ingin anda tampilkan

 7. Selanjutnya simpan template anda
8. Selesai

Nah, mungkin hanya itu pembahasan artikel kita kali ini tentang Cara Membuat Related Post Dengan Thumbinal, bila sobat ingin Membuat Related Posts/Artikel Terkait dengan Icon dan Scroll silahkan klik disini.
Semoga artikel ini bermanfaat buat anda, semua. Akhirul kalam bang dadan ucapkan.

Billahitaufiq Walhidayah
Wassalamu'alaikum Wr.Wb

Hanya Menampilkan Judul Artikel Saja di Home

Cara Hanya Menampilkan Judul Artikel Saja di Home
Cara Hanya Menampilkan Judul Artikel Saja di Home - Sahabat blogger pada kesempatan kali ini bang dadan akan coba membahas tutorial yang sangat simpel sekali yaitu Cara Hanya Menampilkan Judul Artikel Saja di Home. Cara seperti ini biasanya sering digunakan pada situs tentang download mp3, video, full movie dll. Tapi tidak menutup kemungkinan juga bagi sobat yang suka dengan tampilan blog simpel mungkin bisa menggunakan tutorial ini, dan apabila diantara sobat blogger ingin mencoba membuatnya silahkan ikuti langkah-langkah dibawah ini:

Cara Hanya Menampilkan Judul Artikel Saja di Home

  • Pertama silahkan sobat login ke akun blog
  • Kemudian dasbor/rancangan 
  • Pilih template lalu klik Edit HTML *jangan lupa centang expand template widgate
  • Selanjutnya silahkan sobat cari kode ]]</b:skin> lalu copy kode dibawah ini dan tempatkan dibawah kode ]]</b:skin>.

Berikut kodenya:
<style type='text/css'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> .post-body, .databarleft, .datebarright{display:none;} </b:if> </b:if> </style>
  • Setelah itu klik simpan template
  • Selesai dan coba sobat cek pada homepage blog soba nanti akan terlihat hanya judul postingan saja yang tampil pada homepage sobat.
Nah mungkin cukup sekian dulu artikel singkat kali ini tentang Cara Hanya Menampilkan Judul Artikel Saja di Home. Semoga artikel ini bermanfaat buat anda semua, sampai berjumpa lagi dan wassalam..!!!

Membuat Tombol Back to Top Down Home Refresh

Cara Membuat Tobol Back to Top, Down, Home, Refresh - Sahabat blogger pada postingan yang lalu bang dadan pernah membuat artikel tentang Cara Membuat Tombol Back to Top dengan JQuery, nah untuk kali ini bang dadan akan coba share artikel tentang Cara Membuat Tobol Back to Top, Down, Home, Refresh, artikel ini sebenarnya mempunyai fungsi sama seperti pada postingan sebelumnya, namun ada penambahan tiga link lagi yaitu page down, refresh dan home. gambar dibawah ini adalah screen shoot nya.

Cara Membuat Tombol Back to Top Down Home dan Refresh dibawah blogCara Membuat Tombol Back to Top Down Home dan Refresh dibawah blog

Untuk DEMO nya sobat bisa lihat pada bagian bawah blog ini. dan bagi sobat yang ingin memasang nya di blog silahkan ikuti langkah - langkahnya berikut ini:

Cara Membuat Tombol Back to Top, Down, Home, dan Refresh
1. Login ke akun blogger
2. Menuju dasbor/rancangan
3. Pilih Template dan Klik Edit HTML
4. Cari kode ]]></b:skin>  dan copy kode dibawah ini tepat diatasnya

Berikut kodenya:

#Enjoy{display:scroll;position:fixed;bottom:1px;leftt:1px;z-index:99}
#Enjoy a{filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;border:0}
#Enjoy img{border:0}
#Enjoy a:hover{filter:alpha(opacity=100);-moz-opacity:1;opacity:1}

5. Kemudian cari kode <body> dan tempatkan kode berikut tepat diatasnya

Berikut kodenya:

<div id='Enjoy'><button><a href='http://bangdadan.blogspot.com' title='Beranda'><span style='font-size: large;'><b>Ω</b></span></a></button>
<button><a href='#' onclick='window.location.reload()' title='Reload Page'><span style='font-size: large;'><b>&#8634;</b></span></a></button>
<button><a href='#top' title='Back to Top'><span style='font-size: large;'><b>&#8679;</b></span></a></button>
<button><a href='#footer' title='Page Down'><span style='font-size: large;'><b>&#8681;</b></span></a></button></div>

Keterangan:
Ganti URL yang berwarna merah dengan URL Blog sobat

6. Selanjutnya klik simpan template
Selesai dech..!!

Tambahan:
Bila sobat ingin mengganti buton-buton tersebut dengan gambar, silahkan sobat ganti kode yang berwarna orange dengan kode dibawah ini:

<img src='URL Gambar'/>

Silahkan sobat ganti tulisan yang berwarna merah dengan URL Gambar sesuai keinginan sobat..!!

Catatan:
Bagi sobat yang tidak ingin belajar dan tidak mau pusing, dan ingin tombolnya sama persis kaya punya bang dadan, gampang aja sob, sobat cukup ganti kode pada no.5 di atas dengan kode dibawah ini:

<div id='Enjoy'>
<a href='http://bangdadan.blogspot.com' title='Beranda'><img src='https://lh4.googleusercontent.com/-NLRRkrf1Xjg/UOcXcopujMI/AAAAAAAABKw/udtVFEWd3PA/w497-h373/black-windows.png'/></a>
<a href='#' onclick='window.location.reload()' title='Reload Page'><img src='https://lh4.googleusercontent.com/-WGNwP0p-4eM/UOcX6kFiBTI/AAAAAAAABLM/zKCXBXK59QY/w497-h373/repeat.png'/></a>
<a href='#top' title='Back to Top'><img src='https://lh4.googleusercontent.com/-VSMRm-IZGzU/UOcUjxXZIkI/AAAAAAAABJ8/U0Uv5yumzu0/w78-h78/next00.png'/></a>
<a href='#footer' title='Page Down'><img src='https://lh6.googleusercontent.com/-la1BjEMLTwY/UOcUjwVn5VI/AAAAAAAABJ4/HnXjFTOIzd4/w78-h78/next0.png'/></a>
</div>

Nah mungkin cukup sekian dulu pembahasan artikel tentang Cara Membuat Tombol Back to Top, Down, Home, dan Refresh. mudah - mudahan artikel ini bisa bermanfaat bagi sobat semua. Selamat mencoba dan succes selalu buat sahabat semua..!!

Membuat Artikel Terkait Dengan Icon dan Scroll

Cara Membuat Artikel Terkait Dengan Icon dan Scroll | Salam sejahtera, buat para blogger dimanapun anda berada. pada postingan kali ini bang dadan akan membahas cara Membuat Artikel Terkait DEngan Icon Dan Scroll, sahabat blogger mungkin yang sering berkunjung kesini pernah melihat postingan bang dadan sebelumnya tentang Cara Membuat Artikel Terkait Dengan Icon, pada postingan yang dulu dan sekarang sebenarnya masih sama, cuma berbeda sedikit yaitu kalau pada postingan kali ini ialah hanya menambahkan fungsi scroll pada artikel terkait. sebenarnya bagi sobat yang sudah mahir dalam dunia blogger mungkin akan sangat mudah membuat fungsi scroll ini hanya dengan menambahkan kode html sedikit saja ya kawan, namun bagi yang belum paha sobat bisa cari cara membuat fungsi scroll di blog. DEMO-nya seperti gambar dibawah ini.

Nah sesuai dengan tema diatas yaitu Cara Membuat Artikel Terkait Dengan Icon dan Scroll, dan agar tidak melebar pembahasan kita, baiklah bang dadan akan langsung saja memaparkan bagaimana Cara Membuat Artikel Terkait Dengan Icon dan Scroll. dan bagi sobat yang ingin memasangnya silahkan simak baik - baik caranya ya?
Cara Membuat Artikel Terkait Dengan Icon dan Scroll

  • Silahkan login ke blog
  • Pilih Rancangan Template Edit HTML *jangan lupa centang expand template widgate
  • Selanjutnya cari kode ]]></b:skin>
  • Copy kode dibawah ini di atas ]]></b:skin>
◉ Berikut kodenya:

.rbbox{border: 1px solid #000000;padding: 5px;
background-color: #F2F2F2;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: #B59090;}
.rbbox ul li {
display : block;
background : url(https://lh5.googleusercontent.com/-zxh1l81-DkM/UNnbyQ8uQeI/AAAAAAAAA44/Y2OJ3Wyggjg/w497-h373/crk.png) no-repeat 0px 0;
margin-left : -10px;
padding-top : 0;
padding-right : 0px;
padding-bottom : 1px;
padding-left : 20px;
margin-bottom : 5px;
line-height : 1em;
border-bottom:1px dotted #cccccc;

◉ Masih dalam Edit HTML
  • Selanjutnya cari kode <data:post.body/>
  • Kemudian letakan kode berikut di bawah kode <data:post.body/>
◉ Berikut kodenya:

  • Selanjutnya klik simpan template
Selesai sudah, sekarang artikel terkait seperti punya bang dadan dibawah ini telah sobat bikin diblognya sendiri. dan bila ingin Membuat Artikel Terkait Tanpa Scroll silahkan klik disini.
Dan mungkin cukup sekian pula pembahasan kita kali ini tentang Cara Membuat Artikel Terkait Dengan Icon dan Scroll. Semoga artikel ini bermanfaat baut anda semuanya.
Akhir kata bang dadan ucapkan selamat mencoba dan wassalam..!!

Cara Membuat Artikel Terkait Dengan Icon

Assalamu'alaikum Wr. Wb
Cara Membuat Artikel Terkait Dengan Icon | salam damai bang dadan ucapkan kepada seluruh sahabat blogger dimanapun anda berada, pada postingan kali ini bang dadan akan coba membahas Cara Membuat Artikel Terkait Dengan Icon. Dalam menyambut hari natal dan tahun baru ini bang dadan juga mengucapkan selamat tahun baru.

Cara Membuat Artikel Terkait Dengan Icon

Oke sobat, mungkin sudah pada tahu artikel terkait karena ini adalah tutorial yang sudah lama banget di posting para master - master blogger semua, dan bang dadan mungkin ketinggalan buat postingan ini, tapi tidak apa - apa karena bang dadan membuat artikel di blog ini hanya semata - mata untuk tabungan bila nanti  perlu dengan tutorial blog bisa langsung ke blog sendiri.

Langusng saja mungkin pada pembahasan nya sobat:
⇛ Cara Membuat Artikel Terkait Dengan Icon

  1. Login dulu ke Blogger
  2. Kemudian masuk ke Rancangan kemudian pilih Template lalu klik Edit HTML *Jangan lupa "Expand Template Widget"
  3. Silahkan sobat backup template dulu untuk berjaga - jaga terjadinya kesalahan
  4. Kemudian cari kode </head> dan letakan kode dibawah ini tepat dibawah tag </head>
Berikut kodenya:
<style type='text/css'> #related-posts { float : left; width : 100%; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url(&quot;https://lh5.googleusercontent.com/-LKNvxbqBAO4/UNhLPoJO-CI/AAAAAAAAA4A/OVzsQaNkQtY/w497-h373/rss.png&quot;) no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://belajarblogging.googlecode.com/files/relpost.js' type='text/javascript'/>

5.  Masih dalam edit html jika sudah cara yang di atas sekarang kita melanjutkan cara berikutnya.
6.  Cari kode <data:post.body/> Lalu copy kode dibawah ini tepat dibawah <data:post.body/>

 Berikut kodenya:
<b:if cond='data:blog.pageType == "item"'><div id="related-posts"><font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font><script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script></div></b:if>

7. Selanjutnya klik simpan template
Selesai deh, sekarang coba sobat buka salah satu postingan sobat nanti artikel terkait / related posts dibawah postingan sobat.

Nah, mungkin cukup sekian dulu postingan kita kali ini tentang Cara Membuat Artikel Terkait Dengan Icon. Namun apabila sobat ingin mencoba Membuat Artikel Terkait dengan Icon dan Scroll silahkan klik disini. Semoga bermanfaat dan selamat mencoba..!!

Billahitaufiq walhidayah
Wassalamu'alaikum Wr. Wb

Membuat Efek Hover Pada Gambar diblog

Cara Membuat Efek Hover Pada Gambar diblog - Sahabat blogger, pada postingan yang lalu bang dadan telah membuat artikel tentang Cara Membuat Efek Image Zoom di Blog, nah untuk menyambung artikel sebelumnya kali ini bang dadan akan membahas Cara Membuat Efek Hover Pada Gambar di Blog.

Image hover merupakan sebuah efek gambar redup atau terang, maksudnya bila kita mengarahkan kursor pada gambar di postingan secara otomatis gambar yang redup akan menjadi terang, begitu juga sebaliknya, bila kita mengarahkan mouse pada gambar yang terang, otomatis akan menjadi redup. 

Bagaimana caranya bisa seperti itu?? Oke langsung saja bagi sobat yang ingin melihat DEMO-nya silahkan sobat arahkan kursor pada gambar di bawah ini.

Contoh 1

◉ Berikut Kodenya:

<img src="URL gambar" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

Contoh 2
◉ Berikut Kodenya:

<img src="URL gambar" border="1" style="opacity:1;filter:alpha(opacity=100)"
onmouseover="this.style.opacity=0.4;this.filters.alpha.opacity=40"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"/>

Silahkan ganti tulisan yang berwarna merah dengan URL Gambar sobat masing - masing.

Nah apabila sobat ingin membuat efek image hover pada semua gambar dipostingan blog secara otomatis, silahkan ikuti langkahnya dibawah ini. yang di tas adalah cara manual.

◉ Berikut cara penerapannya pada blog sobat:

  • Login ke Akun Blog
  • Rancangan Template Edit HTML *jangan lupa centang expand template widgate
  • Cari kode ]]></b:skin>
  • Copy dan pastekan kode dibawah ini tepat diatas ]]></b:skin>

◉ Berikut Kodenya:

.post img{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}
.post img:hover{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}

  • Selanjutnya simpan template

Nah, mungkin sekian dulu pembahasan kali ini tentang Cara Membuat Efek Hover Pada Gambar diblog. Semoga artikel ini bermanfaat buat sobat semua. Selamat mencoba..!!
Sekian dan terimakasih.

Cara Membuat Efek Image Zoom diblog

Assalamu'alaikuw Wr. Wb
Cara Membuat Efek Image Zoom diblog - Pada kesempatan kali ini bertepatan dengan Hari Ibu, bang dadan akan membuat postingan tentang Cara Membuat Efek Image Zoom di Blog. Sebelumnya bang dadan mengucapkan Selamat Hari Ibu, pada seluruh kaum hawa yang ada di nusantara.


Efek image zoom ini merupakan efek ketika bila kita mengarahkan kursor pada gambar yang ada di dalam postingan, secara otomatis gambar tersebut akan membesar ketika di tunjuk kursor.

Nah bagi sobat yang ingin menerapkan tutorial ini pada blognya sialhkan ikuti langkah - langkah dibawah ini:
✥ Cara Membuat Efek Image Zoom diblog

  • Pertama silahkan sobat login pada akun blog
  • Selanjutnya masuk pada Rancangan ➞ Template ➞ Edit HTML *jangan lupa centang expand template widgate
  • selanjutnya cari kode ]]</b;skin>
  • Setelah ketemu silahkan Copy kode dibawah ini dan tempatkan di atas ]]</b;skin>
✥ Berikut kodenya:

.post img:hover {
-moz-trnasform: scale(1.3) ;
-webkit-transform: scale(1.3);
-o-transform: scale(1.3) ;
-ms-transform: scale(1.2) ;
transform: scale(1.3) ;}

  • Selanjutnya silahkan sobat simpan Template
Selesai, sekarang coba sobat menuju postingan yang ada gambarnya, dan arahkan kursor pada gambar dalam postingan soba, pasti gambar tersebut akan menjadi besar secara otomatis.

Sekian dulu postingan kali ini tentang Cara Membuat Efek Image Zoom diblog. Semoga artikel ini bermanfaat bagi sahabat semua. Terimakasih

Billahitaufiq Walhidayah
Wassalamu'alaikum Wr. Wb
Back To Top