bila anda ingin memasang link teman dengan simple, dan mudah , dan juga agar blog anda tidak
terlalu berat, cara ini bisa anda gunakan
1. Login di blogger
2. Layout ---> Add gadget ---> HTML/Javascript
3. Copy paste code d bawah ini
<select onchange="javascript:window.open(this.options[this.selectedIndex].value);">
<option value="0" selected>Sohib Blog</option>
<option value="http://dimash-devil.blogspot.com/">dimash-devil</option>
<option value="http://japarus.co.tv/">japarus</option>
<option value="http://maharanicozy.blogspot.com/">maharanicozy</option>
<option value="http://http://rezpector333.blogspot.com/">Tolet</option>
<option value="http://tenriewa.co.cc/">tenriewa</option>
<option value="http://crazydavinci.net/">crazydavinci</option>
<option value="LInk anda atau link teman anda disini">judul Link</option>
</select>
mudah kan bila anda punya link teman banyak anda tinggal menambah kan kode ini
<option value="http://nagaribatutaba.blogspot.com/">nagaribatutaba</option>
sebelum kode </select>
anda tinggal ganti kode berwarna Biru dengan URL anda atau URL blog teman anda,
dan berwarna Kuning dengan judul blog anda atau blog teman anda
lalu simpan gadget / widget anda dan lihat hasilnya
pasang link teman dengan menu dropdown
Icon follow twitter melayang
sudah lama juga saya tidak membuka membuat postingan diblog.
ok kali ini saya akan membahas bagaimana cara membuat icon burung twitter melayang layang mengikut arah kursor...
langsung saja ok...
cara membuatnya :
1. Login keblogger
2. pilih menu Rancangan, tambah gadget, pilih Html/ java script
3. Simpan kode berikut :
<!-- floating twitter Bird -->
<script type="text/javascript" src="http://kangdadang.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlXCyF_vVC68C6WCP52z0wHyNDZhsvkgy7oHMT4H7AkpEroXEweun0YbWnGiNtFbrsQOK4uZVRFAkALOGtWUtWMghzq-e99C8omXfBYgkXMNXeSeRMFTozBXGb8_rJ-JGGTCVrs8hPaAg/s1600/birdsprite.png"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "http://twitter.com/J4l4";var tweetThisText = "Twitter - UserID http://www.dadhang.blogspot.com/";tripleflapInit();
</script>
jadi sudah jangan lupa disave ya dan lihat hasil nya sendiri
Ket : Ganti kode yang berwarna biru dengan twitter anda
ok selamat mencoba
Cara Membuat Scroll Box dengan Background Kertas
1. Cara membuatnya : Login blogger
2. Rancangan, Edit Html, Cari kode ]]></b:skin>
3. Dan Simpan kode berikut diatasnya :
/* scroll
----------------------------------------------- */
.scrollboxs{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFm_pcX4B0lNw5_WeoD2VZIpL3bquQhfoHNcdFBjIBcpNJ6IMrNQTr9ZAG45sd4y3BinGRS0qVmEfeBny0LQXXsCrvb29cQ5wgoeZkneH6H-O_GzszmzBRb-QA5frQHMlep-A0Rix8NDQ/s1600/papers.jpg) repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3f3f3', endColorstr='#cccccc');
color: #940f04;
color:rgba(0,0,0,0.9);
border:1px solid rgba(0,0,0,0.5);
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-box-shadow: 3px 3px 5px #000000;
-moz-box-shadow: 3px 3px 5px #000000;
-webkit-border-bottom-left-radius:10px;
text-shadow:1px 1px 0px rgba(255,255,255,0.8);
text-decoration: none;
padding: 3px;
overflow: auto;
width: auto;
height: 150px;
padding-top:3px;
padding-bottom:3px;
}
.scrollboxs a, .scroll:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx077nn2jyrebQXqzmaUE7QtdS9SkNzV8HbupLgTxX0I4I_77XJnF3PYnS0niNS4-POTB2QaIvUnmQGP34Nq3BhS89pwJeVUTaC3NCHtYwUqNn3sJiocRewv3ujftbFyAwRHec04AXAjp4/s1600/papers.jpg) repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#f3f3f3');
color:#000;
color:rgba(0,0,0,0.9);
border:1px solid rgba(0,0,0,0.5);
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-box-shadow: 3px 3px 5px #2E2E2E;
-moz-box-shadow: 3px 3px 5px #2E2E2E;
-webkit-border-bottom-left-radius:10px;
text-shadow:1px 1px 0px rgba(255,255,255,0.8);
text-decoration: none;
padding: 3px;
overflow: auto;
width: auto;
height: 150px;
padding-top:3px;
padding-bottom:3px;
}
Untuk ukuran Height ,Width dan lainnya silahkan sesuaikan dengan keinginan kawan-kawan,
simpan template...
selanjutnya cara pemanggilannya pada Html atau pada edit html Posting:
<div class"scrollboxs">
Teks Yang ingin disimpan pada scroll box</div>
Selamat mencoba
Pure CSS Fish Eye Menu
kali ni saya akan membahas pure CSS Fish Eye,fish eye atau yang kita kenal dengan mata ikan.
mata ikan disini bukan berarti kita membuat menu dengan mata ikan ya...hehehe
tapi kita akan membuat suatu menu yang apabila kursor kita dekatkan maka menu tersebut akan membesar.
Cara membuatnya:
1. Seperti biasa Login blogger
2. Rancangan, Edit Html, Cari kode ]]></b:skin>
3. Dan Simpan kode berikut diatasnya :
/*----------------
Pure CSS Fish Eye Menu Expand Down
-------------------------------*/
.expand-down {
font-family:Arial, Helvetica, sans-serif;
line-height:normal;
margin-top:20px;
height:150px;
width:500px;
margin-bottom:30px;
}
.expand-down * {
margin: 0;
padding: 0;
}
.expand-down ul {
padding-top:10px;
margin-left:10px;
}
.expand-down ul li {
float:left;
list-style-type:none;
}
.expand-down ul li a {
text-decoration:none;
}
.expand-down ul li a img {
width:50px;
height:50px;
border:none;
}
.expand-down ul li a span {
display:none;
}
.expand-down ul li:hover a span {
display:block;
font-size:14px;
text-align:center;
color:#fff;
}
.expand-down ul li:hover a img {
width:100px;
height:100px;
}
.expand-down ul li:hover + li a img {
width:60px;
height:60px;
}
.expand-down ul li:hover + li + li a img {
width:55px;
height:55px;
}
4. jangan lupa disave
5. Pemanggilannya pada html silahkan disimpan di tempat yang diinginkan pada edit html posting ataupun Gadget Html/java script:
<div class="expand-down">
<ul class="expand-down">
<li>
<a href="#" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWsmLxn3Vxejt9GNnxJRAQI7d1ovoQR_rgmCFbvo2OqPZ0-qMT_8G-dwL808V8EQvCnyKu2CUe47ooxne-rvvNhMU2kUaSRtJu83ShSbr7-EQK5qvIOI1p8lPGjoqqN-ak2EfImoWVi7U/s1600/firefox-trans.png"/>
</a>
</li>
<li>
<a href="#" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPq98czxv0x2Duh_71mB23fqMn4jasFdtgr-S4c79YRJLDoUewvwQQ2JQoH47N2AqvEeoyDzWjLJqns8Brd_bmXaEmbsfGi_t-LYdjIKxmcT5UFekPG9gdB9b2oQ-nGQ97HFG7uiwmdKk/s1600/safari-trans.png"/>
</a>
</li>
<li>
<a href="#" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWsmLxn3Vxejt9GNnxJRAQI7d1ovoQR_rgmCFbvo2OqPZ0-qMT_8G-dwL808V8EQvCnyKu2CUe47ooxne-rvvNhMU2kUaSRtJu83ShSbr7-EQK5qvIOI1p8lPGjoqqN-ak2EfImoWVi7U/s1600/firefox-trans.png"/>
</a>
</li>
<li>
<a href="#"target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6awS-vbuGSvDi19sOc5xlTpYZ9UWWsWAAIDfVWP4IevivU1wZ_bJGsyf8uSr2-FBcJ1fBemIapO1pdROq3eFdKvnMYYsK1joLwrgzw5HzMjFrSXcWNJA8iR2U7l4DE3p3TQGevtRyxjs/s1600/google-chrome-trans.png" />
</a>
</li>
<li>
<a href="#" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIevKHDfZsqaVQFP0jkojeRKg_w_aLj73_kmxAJlX-tHGk9oB67seu7aqnpT-rplDcqu6uB1ENytBG2gezIG4Fj8MKlIt9zh67r1dGoYrXMQPSVxJtP1d8tYeCPoE9CECcuczfWNBu6YM/s1600/ie-trans.png"/>
</a>
</li>
<li>
<a href="#" title="Konqueror" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKbLPlLhvKjd311RQmGrT02kNx92rlwkloUKnF8tij9f3evTPtM86WOlFhXWSSe2n2gjKURUxpSmx6Fez2NuPZ5XBVQDR6NZilZ5Ui45QiDmefCSR1T-J6pT14ApdatU1H8m6SGorOAVw/s1600/konqueror-trans.png" />
</a>
</li>
</ul>
</div>
Selesai...
Selamat mencoba
Membuat Widget Related Post With Thumbnails
Mungkin teman-teman pernah melihat widget yang satu ni pada setiap blog yang dikunjungi yang letak na dibagian bawah setip postingan...ok langsung saja dewh...
1. Cara membuatnya : Login blogger
2. Rancangan, Edit Html, Cari kode ]]></b:skin>
3. Dan Simpan kode berikut diatasnya :
<b:if cond='data:blog.pageType == "item"'>
<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.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://kangdadang.googlecode.com/files/relatedpost.js' type='text/javascript'/>
</b:if>
sekarang cari kode <div class='post-footer-line post-footer-line-1'> atau yang serupa dengan kode tadi, Ctrl + F untuk mempermudah pencarian,
jika kode tadi sudah ditemukkan sekarang simpan kode berikut dibawah kode merah tadi :
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:if></b:loop><a href='http://amatulla83.blogspot.com' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
kode berwarna biru silahkan ganti sesuai keinginan ingin berapa post yang ditampilkan,,
seleai.. jangan lupa Simpan template......
Cara Menyembunyikan Widget/Gadget Facebook Di Kiri
Cara Membuat Wiget/Gadget Facebook di Kiri, sama seperti menyembunyikan Gadget di sebelah kanan seperti buku tamu. Scriptnya hanya di ubah - ubah sedikit. Langsung saja masuk ke tutorialnya.
1. Seperti biasa login dulu di Blogger.com
2. Buka Rancangan - Elemen Laman.
3. Tambah Widget/Gatget - Html/Javascript
4. Copy paste kode script di bawah ini
<!-- left/right hidden chatbox byhttp://www.nagaribatutaba.blogspot.com/ START -->
<style>
#hcl {
position:fixed;
top:50px;
left:0px;
z-index:+1000;
}
* html #hcl {position:relative;}
.hcltab {
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguNLh2m2fqq5L4FNQ8sbic4Lq8tQxD09RT6Y911cxpO3kH1Qy8-e4eWPwHD-0JdbcijROEUjzmxmya44gd3UwCZXnlDX7DrgoDXqaqBqbpif36DzpzRS9qgfbomHwSvwiEdgEPUGdk3NU/s1600/cbred-LEFT+copy4545.png') no-repeat;
}
.hclcontent {
float:left;
border:6px solid #e08200;
background:#ffffff;
padding:5px;
}
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type="text/javascript">
function showHidehcl(){
var hcl = document.getElementById("hcl");
var w = hcl.offsetWidth;
hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0);
hcl.opened = !hcl.opened;
}
function movehcl(x0, xf){
var hcl = document.getElementById("hcl");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcl.style.left = x.toString() + "px";
if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);}
}
</script>
<div id="hcl">
<div class="hclcontent">
Ganti Tulisan Ini Dengan Script Facebook Atau Widget Lain
<br />
<div class="hc-credit">
<span style="float:left">
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
<a href=http://www.nagaribatutaba.blogspot.com/ target="_blank">
Get this widget!
</a>
</span>
<span style="float:right">
<a href="javascript:showHidehcl()">
[close]
</a>
</span>
</div>
</div>
<div class="hcltab" onclick="showHidehcl()"> </div>
</div>
<script type="text/javascript">
var hcl = document.getElementById("hcl");
hcl.style.left = (30-hcl.offsetWidth).toString() + "px";
</script>
<!-- left/right hidden chatbox by http://nagaribatutaba.blogspot.com/ END -->
5. Ganti tulisan Yang berwarna merah dengan script facebook anda.
6. Yang terakhir simpan. lalu lihat tampilan blog anda sekarang
Ket :
background:url bisa anda ganti dengan background anda sendiri
border atau garis tepi bisa anda ganti dengan warna kesukaan anda
background bisa anda ganti juga dengan warna kesukaan anda
MENAMPILKAN POST BLOG DI FACEBOOK
Bagi peblogger yang memiliki akun Facebook , sebaiknya menggunakan kesempatan ini untuk mempublikasika postingan blog anda pada Facebook.
Apalagi kalau anda memiliki banyak teman diFacebook, dan postingan anda memiliki daya tarik, sehingga teman-teman anda itu akan langsung menuju blog anda, maka dengan sendirinya akan menambah traffik blog anda.
Caranya mudah, ikuti langkah-langkah dibawah ini :
1. Masuk ke Facebook dengan akun anda
2. kemudian dimenu pencarian ketik MIRROR BLOG
Lihat gambar :
3. Klik tombol Lihat aplikasi maka akan muncul gambar :
4. Klik Izinkan.
5. Setelah itu anda akan dibawa kemenu Mirror blog
6. Kemudian anda centang Ikon Blogger "I have a blog on Blogger.com" seperti pada gambar dibawah :
7. klik continue
8. Silahkan masukkan email dan password yang bisa digunakan untuk masuk ke Blogger anda pada kotak yang tersedia. Klik Continue. Lihat Gambar :
9. jika anda memiliki blog lebih dari satu, berikutnya anda dikasih pilihan, blog mana yang akan ditampilkan. silahkan anda pilih kemudian klik Continue.
Lihat gambar :
10. Selanjutnya muncul tulisan , "Congratulation! Your Mirror Blog is ready for use!" Klik Done. Pada langkah ini berarti anda telah berhasil memasukkan postingan blog anda pada Facebook. Lihat gambar :
Selesai...Selamat mencoba, semoga bermanfaat
CSS3 Dropdown Menu
kali ini saya akan membahas sebuah menu yang berguir kebawah atau dropdown dengan CSS3,mungkin para blogger pernah melihat blog seseorang yang menggunakan dropdown menu atau menu yang bergulir kebawah...
ok langsung saja
1. Cara membuatnya : Login blogger
2. Rancangan, Edit Html, Cari kode ]]></b:skin>
3. Dan Simpan kode berikut diatasnya :
/*----------------
CSS3 DropDown Menu
-------------------------------*/
#navcss {
margin: 0;
padding: 7px 6px 0;
background: #7d7d7d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfJxQK0cgOh7SdJsKroMp6nh5j6RtugZ5SwRIflzRtNjrj_8Z-PTuU53Yr3RaflRY2YXhdSuqWjvYu6ajpSyI1_2saIitWHufbdGf8p1FFoedgNBa_Zpo_weYWqI-GZM6Sq7uNRpAj2uI/s1600/gradient.png) repeat-x 0 -110px;
line-height: 100%;
border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
#navcss li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}
/* main level link */
#navcss a {
font-weight: bold;
color: #000;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;
text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#navcss a:hover {
background: #000;
color: #000;
}
/* main level link hover */
#navcss .current a, #navcss li:hover > a {
background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfJxQK0cgOh7SdJsKroMp6nh5j6RtugZ5SwRIflzRtNjrj_8Z-PTuU53Yr3RaflRY2YXhdSuqWjvYu6ajpSyI1_2saIitWHufbdGf8p1FFoedgNBa_Zpo_weYWqI-GZM6Sq7uNRpAj2uI/s1600/gradient.png) repeat-x 0 -40px;
color: #000;
border-top: solid 1px #f8f8f8;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
box-shadow: 0 1px 1px rgba(0,0,0, .2);
text-shadow: 0 1px 0 rgba(255,255,255, 1);
}
/* sub levels link hover */
#navcss ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #000;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#navcss ul a:hover {
background: #0078ff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfJxQK0cgOh7SdJsKroMp6nh5j6RtugZ5SwRIflzRtNjrj_8Z-PTuU53Yr3RaflRY2YXhdSuqWjvYu6ajpSyI1_2saIitWHufbdGf8p1FFoedgNBa_Zpo_weYWqI-GZM6Sq7uNRpAj2uI/s1600/gradient.png) repeat-x 0 -100px !important;
color: #000 !important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0 1px 1px rgba(0,0,0, .1);
}
/* dropdown */
#navcss li:hover > ul {
display: block;
}
/* level 2 list */
#navcss ul {
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
left: 0;
background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfJxQK0cgOh7SdJsKroMp6nh5j6RtugZ5SwRIflzRtNjrj_8Z-PTuU53Yr3RaflRY2YXhdSuqWjvYu6ajpSyI1_2saIitWHufbdGf8p1FFoedgNBa_Zpo_weYWqI-GZM6Sq7uNRpAj2uI/s1600/gradient.png) repeat-x 0 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#navcss ul li {
float: none;
margin: 0;
padding: 0;
}
#navcss ul a {
font-weight: normal;
text-shadow: 0 1px 0 #fff;
}
/* level 3+ list */
#navcss ul ul {
left: 181px;
top: -3px;
}
/* rounded corners of first and last link */
#navcss ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#navcss ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}
/* clearfix */
#navcss:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#navcss {
display: inline-block;
}
4. Simpan Kode berikut di bawah kode Head-nav(sesuai template) :
<ul id="navcss">
<li class="current"><a href="#">Home</a></li>
<li><a href="#">My Projects</a>
<ul>
<li><a href="#">N.Design Studio</a>
<ul>
<li><a href="#">Portfolio</a></li>
<li><a href="#">WordPress Themes</a></li>
<li><a href="#">Wallpapers</a></li>
<li><a href="#">Illustrator Tutorials</a></li>
</ul>
</li>
<li><a href="#">Web Designer Wall</a>
<ul>
<li><a href="#">Design Job Wall</a></li>
</ul>
</li>
<li><a href="#">IconDock</a></li>
<li><a href="#">Best Web Gallery</a></li>
</ul>
</li>
<li><a href="#">Multi-Levels</a>
<ul>
<li><a href="#">Team</a>
<ul>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a>
<ul>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
</ul>
</li>
<li><a href="#">Sub-Level Item</a></li>
</ul>
</li>
<li><a href="#">Sales</a></li>
<li><a href="#">Another Link</a></li>
<li><a href="#">Department</a>
<ul>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
Simpan template.......... selamat mencoba
Cara membuat Scroll pada widget
Tanpa basa basi lagi para blogger....
1. Login ke Blogger
2. Klik Rancangan → Edit HTML
3. Klik tulisan Download Template Lengkap
Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula
Beri tanda centang pada kotak di samping tulisan Expand Template Widget
Kemudian cari kode widget yang akan kita beri scroll na,kali ini saya akan menggunakan widget
feedjit seperti pada gambar dibawah ini :
untuk mencari letak widget tersebut anda tinggal memilih menu Edit dimana widget tersebut terletak maka akan tampil
tanda yang berwarna merah adalah dimana letak dimana widget tersebut.
setelah itu cari kode ]]></b:skin> Copy kode dibawah ini dan Paste di atasnya kode tadi :
Simpan Template......
Contoh lainnya jika ingin memasang kan scroll pada widget lain tinggal ganti Kode id berwana biru (HTML8)nama id tersebut silahkan sesuaikan dengan template kawan-kawan....
Selamat mencoba.............
Panduan Membuat Kode HTML Parser Box
Saya sempat bingung juga bagaimana menamppilkan kode HTML dalam sebuah posting karena setelah saya coba beberapa kali tetap saja kode HTML tidak bisa ditampilkan dalam sebuah postingan.
tapi saya tidak putus saya akhir na saya coba browsing diinternet dengan bantuan mbah google yang akhir na saya menemukan sebuah gadget untuk memparser kode HTML agar dapat tampil di posting.
Sebenarnya gadget ini amat berguna untuk para blogger terutama kepada mereka-mereka yang sering membuat posting tentang blogger tips. Ada kalanya kita terpaksa buat post kode HTML untuk dicopy-paste oleh blogger.
Ini Kode Untuk Membuat HTML Parser Box
01 - Nama Parse Script boleh diubah mengikut kehendak masing-masing.
02 - Ukuran Box boleh diubah dengan menukar angka-angka di bahagian ini:
a) width: 400px
b) "top" width="400"
c) textarea cols="50"
03 - Cara Pengunaan: Copy-paste kode HTML yang hendak diparse kedalam kotak dan klik SEKALI sahaja.
04 - Cara Pemasangan: Pergi ke Blogger - Dashboard - Design - Add a Gadget – HTML/JavaScript - Save
05 - Contoh Parser Box lihat dibawah C/Box seri.
Kotak Kosong Untuk Menyimpan Kode HTML yang telah diparse agar kelihatan kemas sewaktu diposting. Copy-paste kodenya dibawah ini.
01 - Height boleh diubah mengikut kesesuaian.
02 - Border kalau ingin dibesarkan boleh guna angka tinggi, contoh 2 atau 3. Kalau hendak hilangkan border guna angka 0.
03 - 000000, ini warna border, boleh juga ditukar mengikut kesesuaian latar blog.
Sekian dari saya Semoga bermanfaat
Automatik Readmore Dengan Thumbnail Untuk Blogspot
para blogger mungkin sudah tau dengan menu yang satu ini...ya READ MORE adalah suatu sambungan halaman sebuah postingan didalam blog anda...
disini saya akan membahas Menu READ MORE dengan Thumbnail...
ok tanpa banyak basa basi lagi langsung ja dewh...
Masuk kemenu Blogger:
maka akan tampak menu seprti gambar dibawah ini
Kemudian Klik Tab Design :
dan akan keluar menu seperti gambar dibawah ini
Klik Tab Edit HTML
Jangan lupa Beri tanda centang di Expand Widget Templates
Setelah itu Cari kode ini </head>,seperti dibawah:
]]></b:skin>
</head>
<body>
Salin kode dibawah ini dan pastekan diatas </head>
Cari kode <data:post.body/> ini, rujukkan seperti dibawah. Bila sudah jumpa delete/buang kode tersebut.
Salin kode dibawah ini dan pastekan di tempat <data:post.body/> yang telah didelete/buang tadi.
Catatan:
summary_noimg = 430; - Jumlah karakter/huruf yang ingin dipaparkan
summary_img = 340; - Jumlah karakter/huruf yang ingin dipaparkan jika ada thumnail
img_thumb_height = 100; - Ketinggian thumbnail
img_thumb_width = 120; - Lebar thumbnail
Baca Selanjutnya - Boleh ditukar mengikut kesesuaian anda.
Save template dan View Blog
Cara Merubah Tampilan Layout Facebook
Bosan dengan tampilan facebook yang begitu-gitu saja tanpa variasi, tidak seperti friendster atau myspace yang bisa kita kostumisasi sesuai dengan kemauan kita. Kalau begitu coba yang satu ini, dengan cara ini kita dapat mengganti tampilan halaman facebook menjadi lebih bagus dan yang paling penting bisa dikostumisasi sendiri.
Aritkel ini saya buat untuk Anda yang suka dengan kostumisasi tampilan dan sekaligus memenuhi kebutuhan beberapa pengunjung yang menuju keblog ini melalui google dengan keyword tentang :
-cara mengganti layout facebook
-tutorial mengganti layout facebook
-merubah tampilan facebook
-mengubah tampilan facebook
Dan ternyata banyak sekali yang mencari artikrl tentang tampilan facebook. Setelah beberapa penelusuran website, blog dan group-group yang berisi tentang tutorial
mengganti layout facebook, saya menemukan 2 cara berbeda:
1. Merubah tampilan layout facebook dengan cara userstyles.org (untuk penguna mozila firefox)
-download add-ons mozzila
-klik "add to firefox", installasi and restart mozilla firefox
-pilih tampilan yang diinginkan disini
-klik tombol "Load into Stylish"
-save dan refresh halaman facebook Anda
Selamat Mencoba
