Recent post
Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan
1.Login ke Blogger
2.Masuk ke Template >> Edit HTML (centang expand widget templates)
3.Letakkan kode CSS di bawah ini diatas ]]></b:skin> :
---------------------------------------------------------------------------------------
.social-buttons {
position: fixed;
top: 130px;
width: 45px;
z-index: 9999;
}
.button-left {
left: 0;
}
.button-right {
right: 0;
}
.social-buttons #twitter-btn .social-icon,
.social-buttons #facebook-btn .social-icon,
.social-buttons #google-btn .social-icon,
.social-buttons #rss-btn .social-icon,
.social-buttons #pinterest-btn .social-icon,
.social-buttons #youtube-btn .social-icon {
background-color: #33353B;
background-image: url(http://1.bp.blogspot.com/-KOzIiYFlBAk/UUmLwwZSs-I/AAAAAAAAAnA/h6G772N3cpI/s1600/mas-icons.png);
}
.button-left #facebook-btn span {
background-position: right 10px;
}
.button-left #twitter-btn span {
background-position: right -35px;
}
.button-left #google-btn span {
background-position: right -127px;
}
.button-left #rss-btn span {
background-position: right -80px;
}
.button-left #pinterest-btn span {
background-position: 11px -177px;
}
.button-left #youtube-btn span {
background-position: 11px -223px;
}
.button-right #facebook-btn span {
background-position: 12px 10px;
}
.button-right #twitter-btn span {
background-position: 11px -35px;
}
.button-right #google-btn span {
background-position: 10px -127px;
}
.button-right #rss-btn span {
background-position: 11px -80px;
}
.button-right #pinterest-btn span {
background-position: 11px -177px;
}
.button-right #youtube-btn span {
background-position: 11px -223px;
}
.social-buttons #facebook-btn:hover .social-icon {
background-color: #3B5998;
}
.social-buttons #twitter-btn:hover .social-icon {
background-color: #62BDB2;
}
.social-buttons #google-btn:hover .social-icon {
background-color: #DB4A39;
}
.social-buttons #rss-btn:hover .social-icon {
background-color: #FF8B0F;
}
.social-buttons #pinterest-btn:hover .social-icon {
background-color: #D43638;
}
.social-buttons #youtube-btn:hover .social-icon {
background-color: #C4302B;
}
.social-buttons a:hover .social-text {
display: block;
}
.button-left .social-icon {
-moz-transition: background-color 0.4s ease-in 0s;
-webkit-transition: background-color 0.4s ease-in 0s;
background-repeat: no-repeat;
display: block;
float: left;
height: 43px;
margin-bottom: 2px;
width: 43px;
}
.button-left .social-text {
display: none;
float: right;
font-size: 1em;
font-weight: bold;
margin: 11px 40px 11px 0px;
white-space: nowrap;
}
.button-right .social-icon {
-moz-transition: background-color 0.4s ease-in 0s;
-webkit-transition: background-color 0.4s ease-in 0s;
background-repeat: no-repeat;
display: block;
float: right;
height: 43px;
margin-bottom: 2px;
width: 43px;
}
.button-right .social-text {
display: none;
float: left;
font-size: 80%;
font-weight: bold;
margin: 11px 0 11px 40px;
white-space: nowrap;
}
.social-buttons .social-text {
color: #FFFFFF;
}
---------------------------------------------------------------------------------------------------------------------------------
4.Berikutnya penambahan jquery dan javascript, masih di Edit HTML letakkan kode berikut sebelum </head> :
--------------------------------------------------------------------------------------------------------------------------------
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>
<script>
$(window).load(function(){
$('.social-buttons .social-icon').mouseenter(function(){
$(this).stop();
$(this).animate({width:'160'}, 500, 'easeOutBounce',function(){});
});
$('.social-buttons .social-icon').mouseleave(function(){
$(this).stop();
$(this).animate({width:'43'}, 500, 'easeOutBounce',function(){});
});
});
</script>
Untuk jquery library warna biru diatas, jika pada template yang Anda gunakan sudah terpasang, ditinggalkan saja.
----------------------------------------------------------------------------------------------------------------------
5.Selanjutnya memanggil widget tersebut, letakkan kode HTML di bawah ini sebelum </body> :
----------------------------------------------------------------------------------------------------------------------
<div class='social-buttons button-right hidden-phone hidden-tablet'>
<a class='itemsocial' href='https://www.facebook.com/your FB' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Facebook</span></span></a>
<a class='itemsocial' href='https://twitter.com/your twitter' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Twitter</span></span></a>
<a class='itemsocial' href='https://plus.google.com/your G+' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a>
<a class='itemsocial' href='http://pinterest.com/your ID' id='pinterest-btn' target='_blank'><span class='social-icon'>
<span class='social-text'>Follow via Pinterest</span></span></a>
<a class='itemsocial' href='https://www.youtube.com/user/your ID' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Youtube</span></span></a>
<a class='itemsocial' href='http://feeds.feedburner.com/your feed' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a>
</div>
Ganti tulisan warna biru diatas, dengan ID Anda masing-masing jangan sampai keliru dengan ID tetangga.
Terakhir, Save Templates
SUMBER
1
2
3
agsuwustwguswubswnsb
Style 1:
<div id="spoiler">
<div><input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'LIHAT LAGI'; }" type="button" name="button" value="LIHAT" /></div>
<div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">Letakkan Kode yang disembunyikan disini</div>
<div id="hide"></div>
</div>
Style 2:
<div><input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'LIHAT LAGI'; }" type="button" name="button" value="BUKA" /></div>
<div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">
<div style="color: #000000; background: none repeat scroll 0% 0% #ebf3fb; border: 1px solid #aaccee; padding: 7px; margin: 0px;">LETAKKAN KODENYA DISINI</div>
<div id="hide"></div>
</div>
Style 3:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"> </script> <script type="text/javascript"> $(function(){$("#butToggle").click(function(){$('#dvt').toggle(1000);});}); </script> <style type="text/css"> #dvt{width: 200px;height: 100px;border: solid 1px black;background-color:LightGrey;text-align:center; display:none;} </style> <button id="butToggle">Klik Untuk Buka</button> <div id="dvt"> Letakan Apa Aja Yang Ingin Anda Pasang Di Sini</div>
sumber
Woke , kali ini kazedama mw mosting tips membuat kota(objek) di bawah header , mungkin beberapa blogger sudah banyak yang mengetahui cara membuatny , tapi ada beberapa newbie seperti saya , yang belum mengetahui cara membuatnya , kg usah lama-lama beriku cara2 membuatny ....
Nah gambar di ats itu contoh kotak(objekny) , langsung saja dah kita coba ......
1.Masuk ke akun Blogger kalian , kemudian pilih tulisan template
2.Cari kode ]]><b:skin
3.Kemudian masukan kode di bawah ini , tepat di atas kode ]]><b:skin
Keterangan:2.Cari kode ]]><b:skin
3.Kemudian masukan kode di bawah ini , tepat di atas kode ]]><b:skin
-kode warna Merah : itu adalah warna background , silahkan ganti warnany sesuka kalian
-kode warna Biru : itu adalah warna border(garis pinggir) , silhkan ganti juga warnany sesuka kalian
4.berikut ini adalah kode HTML nya , cara meletakany silahkan anda cari kode <div id='content'> letakan kode di bawah ini tepat di atas kode <div id='content'>
Gimana gampangkan ngebuatnya , Monggo di coba .......
sumber
CSS :
CSS dibawah ini di pasang tepat di atas ]]></b:skin>
#loadhalaman {position:fixed;opacity:0.93;top:0;left:0;background-color:#000;z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:#000;display:none;}
.loadball {background-color: transparent;
border: 5px solid rgb(240 ,0 , 0);
border-right: 5px solid transparent;
border-left: 5px solid transparent;
border-radius: 50px;
box-shadow: 0 0 35px rgb(240 ,0 , 0);
width: 50px;
height: 50px;
margin: 0 auto;
-moz-animation: spinPulse 1s infinite ease-in-out;
-webkit-animation: spinPulse 1s infinite linear;}
.loadball-2 {background-color: transparent;
border: 5px solid rgb(240 ,0 , 0);
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-radius: 50px;
box-shadow: 0 0 15px rgb(240 ,0 , 0);
width: 30px;
height: 30px;
margin: 0 auto;
position: relative;
top: -50px;
-moz-animation: spinoffPulse 1s infinite linear;
-webkit-animation: spinoffPulse 1s infinite linear;}
@-moz-keyframes spinPulse {0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(240 ,0 , 0)}50% { -moz-transform:rotate(145deg); opacity:1; }100% { -moz-transform:rotate(-320deg); opacity:0; }}
@-moz-keyframes spinoffPulse {0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg); }}
@-webkit-keyframes spinPulse {0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(240 ,0 , 0)} 50% { -webkit-transform:rotate(145deg); opacity:1;} 100% { -webkit-transform:rotate(-320deg); opacity:0; }}
@-webkit-keyframes spinoffPulse {0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); }}
Script Animasi :
Pasang Script Animasi dibawah ini tepat di atas code </body>
<div id='loadhalaman'>
<div class='loadball'></div>
<div class='loadball-2'></div>
</div>
<script type='text/javascript'>
$(function() {
var siteURL = "http://" + top.location.host.toString();
var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../']");
$internalLinks.click(function() {
$('#loadhalaman').fadeIn(1500).delay(6000).fadeOut(1000);
});
// Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target='_blank'
$('#loadhalaman').click(function() {
$(this).hide();
});
});
</script>
Jquery :
Pasang JQuery ini di atas code </head> ( Pasang kalo belom ada JQuery di template kamu )
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
Keterangan :
Pada code CSS , Kamu ganti code yang berwarna merah dengan code warna mu sendiri.
Tapi kalo ga di ganti juga gpp , cuman hasil nya ntar warna merah persis kaya contoh nya.
sumber
1. Masuk ke edit HTML kemudian centang Expand Template Widget
2. Letakkan kode ini diatas ]]></b:skin>
.MaskedX {
position: absolute;
right: 190px;
width: 178px;
height: 33px;
top: 150px;
background: #000;
z-index: 9;
padding: 2px;
padding-top:4px;
padding-left:4px;
border-radius: 5px 5px 1px 5px;
border: 2px solid #494949;
}
.MaskedX:before{
content: "";
position: absolute;
bottom: -11px;
left: 162px;
border-width: 10px 25px 0px 0px;
border-style: solid;
border-color: #484848 transparent;
display: block;
width: 0;
}
3. Lalu letakkan kode ini dibawah <div id='header-wrapper'>
<div class='MaskedX'>
<a href="http://maskedx.blogspot.com/" onmouseover="window.location=this.href"><img src="http://i1273.photobucket.com/albums/y407/maskedx/xx_zps5a06b628.png" height="31" width="88" title="The Masked Man | Masked X"/></a>
</div>
4. Pratinjau dulu sebelum di save
sumber
Cara memasang Label pada blog :
1. Masuk dasbor kemudian pilih tata letak
2. Tambah Gadegt pada bagian sidebar atau footer atau yang lainnya
3. Pilih widget label blogger dan tambahkan
4. Pengaturan pada widget label : centang pada Tampilkan Jumlah Entri Per Label
5. Simpan
Next
1. Masuk ke edit HTML kemudian centang Expand Template Widget
2. Cari id widget Label atau code mirip seperti di bawah ini
<b:widget id='Label1' locked='false' title='Label' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "list"'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
perhatikan:
<b:widget id='Label1' locked='false' title='Label' type='Label'>
<b:includable id='main'>
hapus semua pada bagian ini:
</b:includable>
</b:widget>
3. Jika sudah di hapus masukan code di bawah ini pada bagian yang di hapus tadi:
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "list"'>
<ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <span expr:dir='data:blog.languageDirection'><data:label.name/></span> <b:else/> <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a> <b:if cond='data:showFreqNumbers'> <span class='label-count' dir='ltr'><data:label.count/> Artikel</span> </b:if> </b:if> </li> </b:loop> </ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
</div>
4. Lalu letakkan code di bawah ini diatas code ]]></b:skin>
.sidebar ul li {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjacxuK9WynINJCRMBESlg-DvTVNfE3r9F3VySa85hBOWfsERK2ai2_8NsnFdWw-q9pY5L9qPhRsSJtVOTxbx4LSMEOiIeMCjDz2r0nlU-PgPpXQ1SjtS1cB-bDRHR2oorGEp11qTj2fVw/s1600/icon-new-window.png) no-repeat left center;
list-style-type:none;
margin:0 0 5px;
padding-left:20px;
transition:padding 0.26s ease;
-moz-transition:padding 0.26s ease;
-webkit-transition:padding 0.26s ease;
}
.sidebar ul li:hover {
padding-left:23px;
}
.sidebar ul li:hover span.label-count {
opacity:0.5;
margin-left:10px;
}
span.label-count {
background:#cc0000;
border-radius:0 10px 10px 0;
-moz-border-radius:0 10px 10px 0;
-webkit-border-radius:0 10px 10px 0;
color:#000;
height:auto;
margin-left:50px;
opacity:0;
position:relative;
text-align:center;
width:auto;
padding:2px 8px;
transition:all 0.3s cubic-bezier(1,2,0,0) 0s;
-moz-transition:all 0.3s cubic-bezier(1,2,0,0) 0s;
-webkit-transition:all 0.3s cubic-bezier(1,2,0,0) 0s;
}
span.label-count:before {
content:"";
width:0;
height:0;
position:absolute;
right:100%;
top:0;
border-width:10px;
border-style:solid;
border-color:transparent #cc0000 transparent transparent;
}
5. Pratinjau dulu sebelum di save
sumber
Diatas adalah gambar kotak komentar yang telah diberi fungsi scroll :
Langsung saja ke pokok pembahasan. berikut langkah langkahnya :
1. Pilih tab Rancangan (Design) >> Edit HTML
2. Centang "Expand Widget Template"
3. Cari kode
<div class='comments' id='comments'>
4. Tambahkan kode
style='max-height:300px;overflow:auto;'
5. Sehingga hasilnya menjadi seperti ini
<div class='comments' id='comments' style='max-height:300px;overflow:auto;'>
6. Ganti tulisan yang berwarna biru sesuai yang sobat inginkan
7. Save template anda.
Mudah bukan? Selamat Mencoba !
sumber
OK kita masuk ke langkah-langkahnya.
[1]. Pertama pastinya Login dulu ke Blog Kalian.
[2]. Dari Dasbor, cari Rancangan --> Edit HTML.
[3]. Cari Code ]]></b:skin>.
[4]. Kalo sudah ketemu, Copy dan Paste-kan Code di bawah, tepat di atas Code tadi
A. Dari Gelap Menjadi Terang.
.post img{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}
.post img:hover{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}
B. Dari Terang Menjadi Gelap.
.post img:hover{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}
[5]. Terakhir tinggal di SAVE, dan lihat hasilnya.
Semoga Bermanfaat.... Jangan lupa tinggalkan Komentar Kalian
Ok langsung ke TKP :
Pertama : Login Ke blog kamu
Kedua : Pilih Edit HTML
Ketiga : Centang dulu Tuh/Di backup dulu tuh template biar nantinya kalo error bisa balik lagi
Keempat : Cari Code ]]></b:skin> (bisa dicari dengan CTRL+F)
Kelima : Pastekan Code berikut ini Tepat Diatas Code Diatas Tadi
#Judultitle{
color:#fafafa;
font-family:'Iceberg',cursive;
font-size:55px;
margin-top:80px;
margin-left:25px;
position:absolute;
text-shadow:2px 2px 2px black,-2px 2px 2px black,-2px -2px 2px black,2px -2px 2px black;}
#Judulbang{
-moz-transform:rotate(-50deg);
color:black;
font-family:'Iceberg',cursive;
font-size:17px;
font-weight:bold;
margin-bottom:25px;
margin-left:300px;
margin-top:80px;
position:absolute;
text-align:center;
text-shadow:2px 2px 3px black,-2px 2px 3px black,-2px -2px 3px black,2px -2px 3px black;}
.Judultitle2{
color:#fff;
font-family:'Iceberg',cursive;
font-size:35px;
font-weight:bold;
margin-bottom:28px;
margin-left:110px;
margin-top:160px;
position:absolute;
text-align:center;
Keenam : Cari Kode <div id='header-wrapper'>
Ketujuh : Dan Pastekan Lagi Kode Dibawah Ini Tepat Dibawahnya
<div id='Judultitle'>Verivication 所经</div>
<div class='Judultitle2'>Sekedar Iseng!</div>
Dan Disave Templatenya
sumber
begini deh kira-kira gambarnya, cek screenshootnya bro
Caranya gampang banget kok bro, cukup letakan CSS ini di atas kode </head>
CSS:
<b:if cond='data:blog.pageType != "item"'><style>.post img{margin:10px;padding-left5px;width:100px; height:100px;text-align:center;-webkit-background-clip: padding-box;-webkit-box-shadow:0px 0px 0px 3px #001fbb;-moz-box-shadow:0px 0px 0px 3px #000;box-shadow:0px 0px 0px 3px #001fbb;-webkit-border-top-left-radius: 50px;-webkit-border-bottom-left-radius: 50px;-moz-border-radius-topleft: 50px;-moz-border-radius-bottomright: 50px;border-top-left-radius: 50px;border-bottom-right-radius: 50px;-o-border-top-left-radius: 50px;-o-border-bottom-right-radius: 50px;};{-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}.post img:hover{-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}</style></b:if>
>>> simpan
<a target="_blank" title="Musik By " href="http://ucok-template-blog.blogspot.com"></a><br />
<embed src="https://c228492d-a-62cb3a1a-s-sites.googlegroups.com/site/httpucoktemplate/musik/%5BNaruto%20Shippuden%20OP5%5D%20Hotaru%20no%20Hikari%20by%20Ikimono-Gakari.swf?attachauth=ANoY7cqdOTgkfW2ariIkorTmaSVQDlaFZw1Of4f55pcZZW44qTRkgObLWsVMUOm8HR-566CPvOLxqbxFpBml89zAjMaFXX60kvwrsshs9K_S-bBXeWcBB9GViVGhf7ciTMBRqP-YLKKCa05ip3p7dNDG0p28zEev7h58nfMMhdWoXHtmSEEVqowvqy5qnmWJFCz9BfNCTD6cjuo_AMFbfdaq5RCqGDgzziVVPstdo8w3saQojueNY_aXLHIhXamU8YuJ4vVhe0a0ndPRhu-ep0-artRsnwTqyDsLCf4rdDUtvefR6XdqYUc%3D&attredirects=0" autostart="TRUE" loop="TRUE" width="1" height="1" align="CENTER"></embed>
huruf yg berwarna merah ganti dengan kode lagu mu
langsung Aja Kita Menuju ke TKP
1. Login Ke Blogger
2. Lalu Masuk ke edit HTML,
3. Centang Expand Template Widget.
4. Copy Kode di Bawah ini dan pastekan di atas kode ]]></b:skin>
a.DarkRead{opacity:1.0;float: right;font-size: 38px;height: 90px;width: 500px;z-index:999999;margin-bottom: -105px;margin-right: 10px;position: relative;padding: 5px;border: 3px solid #000;-webkit-background-clip: padding-box;-webkit-box-shadow: 0 0 8pxrgba(0, 0, 0, 0.3);-moz-box-shadow: 0 0 8px rgba(0,0,0,0.3);box-shadow: 0 0 10pxrgba(0, 0, 0, 0.3);border-radius: 5px;background:#DDE4ED;text-align: center;line-height: 84px;-webkit-transition: all 900ms ease-out;-moz-transition: all 900ms ease-out;-ms-transition: all 900ms ease-out;-o-transition: all 900ms ease-out;transition: all 900ms ease-out;}a.DarkRead:hover{opacity:0.2;}
5. Lalu Cari Kode <data:post.body/> & Pastekan Kode Berikut Tepat Dibawahnya :
<div style='float:right; font-family: Audiowide, cursive; margin-right:-11px;margin-top:-115px'><a class='DarkRead' expr:href='data:post.url'>Read More » </a></div><script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script><div style='float:right; font-family: Squada One, cursive; margin-right:520px;margin-top:-114px'></div>
Semoga Berhasil...
sumber
Keren Kan?
Caranya :
1. Login Ke Blogger.com
2. Masuk Dashboar > Template > Edit HTML
3. Cari Kode Misalnya dmhwidget
4. Nah Disitu Ada CSSnya Misalnya
dmhwidget {ISI CSS}
[-] Nah Disitu Kamu Sisipkan Kode
border-right:5px solid #232222;border-top:5px solid #232222;border-bottom:5px solid #232222;
[-] Jadi
dmhwidget {ISI CSS;border-right:5px solid #232222;border-top:5px solid #232222;border-bottom:5px solid #232222; }
Keterangan Kode
border-right:5px solid #232222;border-top:5px solid #232222;border-bottom:5px solid #232222;
[-] Right,Top,Dan Bottom Itu Adalah Posisinya
[-] 5px Itu Adalah Tebal Bordernya
[-] Dan Kode 232222 Adalah Warna Bordernya
gampang kan?
sumber
Langsung saja ke tata caranyaa
Masuk ke blogger
Tata letak
Tambah Gadget
Pilih HTML/JAVASCRIPT
Masukkan script di bawah ini
<style> #tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;} #tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;} #tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;} #tbisose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhvgSWiDmLNschbGzP0SicLPC9-jNcGF3GG5GtbB_W9Y_kwYdUhQB2zvwEyHoe_dJq3w9GdrZSKN5WE7SLfPCT3z71bnzSjHoX_VoM9pM_uQ1jZA2rQmzy4MsguFBvLv3RyWEKywUAWaU/s800/sprites.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;} #tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;} #tbisose .icon{overflow:hidden; color:#fafafa;} #tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;} #tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;} #tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;} #tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;} #tbisose .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;} #tbisose li:hover .icon, .touch #tbisose li .icon{width:210px;} .touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);} .touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);} .touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);} .touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);} .touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);} </style> <ul id="tbisose"> <li data-alt="Follow us on Facebook"><a class="icon facebook" href="http://www.facebook.com/Hatta.Riau.Last.Child.JJPNS">Follow us on Facebook</a></li> <li data-alt="Follow us on Twitter"><a class="icon twitter" href="https://twitter.com/King_Joker130">Follow us on Twitter</a></li> <li data-alt="Follow us on Google+"><a class="icon googleplus" href="https://plus.google.com/u/0/107561769451310405487/posts">Follow us on Google+</a></li></ul>
Ganti warna orange menjadi url facebook anda
Ganti warna biru menjadi url twitter anda
Ganti warna merahmenjadi url Google+ anda
Sekian~
sumber
Nah Gimana mau pasang di blog kalian? kalo mau pasang kalian bisa ikutin caranya di bawah ini:
1. Masuk Ke Blog
2. Masuk Ke Template
3. Masuk Ke Edit/HTML
4. Masukan Kode Di Bawah Ini Di Atas Kode </head>
<script language='JavaScript' src='http://methodblaze.googlecode.com/files/widget.js%282%29.txt' type='text/javascript'></script><script language='JavaScript' type='text/javascript'> cot("http://i.imgur.com/rlRfcMZ.png")</script>
5. Save Template
6. Selesai Deh
Cara Membuat Tulisan Melayang diBlog langsung ajha simak nih liputannya xD :
1. Ke blogger
2. Pilih Template >> EDIT HTML >> Lanjutkan
3. Cari kode ]]></b:skin> ( gunakan ctrl + f biar cepet )
4. Terus pastekan kode berikut diatasnya
#AmosXP { margin-top:50px; margin-right:30px; position: absolute; font-family: 'Age', cursive; font-size: 30px; text-shadow: 0 1px 0 #fff, 0 2px 0 #bbb, 0 3px 0 #aaa, 0 4px 0 #aaa, 0 5px 0 #999, 0 6px 1px #000, 0 0px 3px #000, 0 1px 3px #000, 0 3px 5px #000, 0 5px 10px #000, 0 5px 20px #000; -webkit-transform: rotate(325deg); -moz-transform: rotate(325deg); -o-transform: rotate(325deg); writing-mode: lr-tb; }
5. Jika sudah,cari lagi kode <body> dan pastekan HTML berikut diatasnya
<div id='AmosXP'>
<center>
<span style='color: orange;'>CREATIVE BLOG</span></center>
</div>
6.Save
Keterangan :
Yang berwarna merah adalah nama fontnya,ganti nama font kesukaanmu dengan nama font kesukaanmu
Yang berwarna ungu adalah ukuran fontnya,ganti dengan sesukamu
Yang berwarna abu abu adalah warna tulisan yang kamu mau,ganti warna orange menjadi warna kesukaanmu ( pake bahasa inggris )
Yang berwarna biru muda adalah Tulisan yang ingin ditampilkan nanti,ganti dengan tulisan yang kamu mau..
sumber
Kali ini saya akan berbagi cara membuat blog di blogger.com , bagi Dorilast yang ingin membuat blog silakan ikuti langkah langkah dibawah ini ^^
1. Kunjungi www.blogger.com
2. Klik daftar / Sign Up
3. Isi formulir dengan Baik dan Benar
4. Klik Berikutnya pada kotak biru
5. Klik Lanjutkan
6. Setelah itu klik Tombo Biru yang dilingkari
7. Kembali Ke www.blogger.com lalu login dengan email yang tadi baru buat
8. Klik Buat Blogbaru
9. Ketik Judul blog,URL dan pilih template
10 . Klik judul Blog yang anda buat
11. Setelah itu Jadi deh,Anda tinggal mempublikasi artikel yang anda mau share
Note : Cara membuat sebuah postingan / artikel di blog
1. Login ke www.blogger.com
2. Pilih entri baru
3. Beri judul artikel
4. Tulis isi artikel dengan selera anda
5. Tekan Publikasikan
6. Selesai
Jika Dorilast ada yang kurang paham / tidak mengerti jangan sungkan sungkan untuk bertanya melalu kotak komentar atau melalui jejaring sosial admin di widget Contact Us ^^
sumber : http://ebelangelsky.blogspot.com/2013/01/tipsandtricks-cara-membuat-blog-di.html
langsung saja ya ?
>> Log In ke Blogger,
>> Klik Template lalu pilih Edit Html,
>> Jangan lupa, beri checklist pada expand template widget,
>> Cari kode ]]></b:skin> (gunakan Ctrl + F untuk mencari),
>> Letakan kode di bawah tepat di atas kode ]]></b:skin>
::selection {background:#000; color: #FF0000 }
::-moz-selection {background:#000; color: #FF0000 }
::-webkit-selection {background:#000; color: #FF0000 }
Keterangan :
Kode yang berwarna merah dan biru anda rubah dengan warna sesuka anda
sumber
Untuk membuatnya sangat simple, kita tidak perlu mengutak-atik kode pada template kita, karena kalian tinggal memasangnya pada widget di Elemen Halaman. Untuk lebih jelasnya silahkan ikuti tahap-tahap pemasangannya dibawah ini:
1. Login Ke Blogger kalian
2. Pilih Rancangan ---> ELEMEN halaman
3. Tambah Gadget ---> Pilih HTML/Java Script
4. Simpan kode berikut dalam konten HTML/Java Scriptnya
<!-- Start Shoutbox light effect by azis -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
$(document).ready(function() {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var semahHeight = $(document).height();
var semahWidth = $(window).width();
//Set heigth and width to semah to fill up the whole screen
$('#semah').css({'width':semahWidth,'height':semahHeight});
//transition effect
$('#semah').fadeIn(1000);
$('#semah').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
});
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#semah').hide();
$('.window').hide();
});
//if semah is clicked
$('#semah').click(function () {
$(this).hide();
$('.window').hide();
});
});
</script>
<style>a {color:#ffffff; text-decoration:none}
img { border: none; }
#semah {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
#wadah .window {
position:fixed;
left:0;
top:0;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}
#wadah #azisshoutbox {
background:url(http://i809.photobucket.com/albums/zz15/yuda03/REDGUESTBOOK.png) no-repeat 0 0 transparent;
width:272px;
height:460px;
padding:56px 0 20px 5px;
}
#tutupan {
padding:2px 0 0 0;
}
</style>
<ul><center> <a href="#azisshoutbox" name="modal"><img src="http://i809.photobucket.com/albums/zz15/yuda03/shoutboxtabRED.png" border="0" width="158" height="58" /></a> </center> </ul>
<div id="wadah">
<!-- Start Shoutbox -->
<div id="azisshoutbox" class="window">
SIMPAN SCRIPT SHOUTBOX KALIAN DISINI
<div id="tutupan"><input type="button" value="Close" class="close" />
</div></div><!-- End Shoutbox -->
<div id="semah"></div></div>
<!-- End of Shoutbox light effect by azis -->
</div>
5. Jangan lupa disimpan
Catatan
1. Untuk ukuran shoutbox/shoutmix/cbox kalian bisa kalian sesuaikan dengan background gambar.
2. Untuk Shoutmix ukurannya Height: 380px dan Width: 261px
3. Untuk Cbox ukurannya height:300px width:250px , untuk width yang bawah samakan dengan width pertama, karena di cbox ada 2 width
4. untuk ukuran tidak harus terpaku pada punya saya diatas, kalian boleh menyesuaikannya sendiri.
sumber
oke langsung saja kita ke pembahasannya :D
1. Pertama" Masuk ke Blogger Account
2. Pergi ke Template
3. Kemudian Klik Edit HTML Nah
4. Lalu Centang "Expand Template Widget"
5. Sekarang Cari Kode </head> atau memakai pencarian menekan tombol F3 / CTRL + F...
6. Kemudian Pastekan Kode Dibawah ini Di atas kode </head>
<b:if cond='data:blog.pageType != "item"'>
<style>
.post {
background:#fff;
background-image: url();
background-repeat:repeat;
border:4px solid #F6F6F6;
font-size:12px;
margin: 1px;
width:276px;
height:250px;
float:left;
margin-bottom:10px;
}
.post h1 {
text-color:;
font-size: 120%;
font:arial black;
}
h3.date-header {
font-size:10px;
background:#fff;
color:red;
}
</style>
<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 240;
summary_img = 200;
img_thumb_height = 90;
img_thumb_width = 90;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>
<script type='text/javascript'>
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script>
</b:if>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
Pengertian Code Berwarna Merah = yaitu warna latarnya
Pengertian Code berwarna Biru = Width : Lebarnya
Pengertian Code berwarna Hijau = Height : Tingginya
Gimana ? caranya mudah kan ?
pastinya donk hehehe..
oke sampai sini saja, semoga artikel ini sangat bermanfaat untuk anda :)
Jangan Lupa Tinggalkan Commentar
sumber
