JARINGAN SHARE

Home All posts

Sunday, November 18, 2012

Cara Membuat Slideshow Widget Photo

✔ Jaringan Share 4:42:00 PM Comment

Tips blog kali ini adalah cara membuat slideshow widget photo. Tips ini adalah hasil utak-atik kang salman ( kucoba.com) silahkan sobat mampir ke situs aslinya www.kucoba.com. Slideshow widget photo ini adalah sebuah widget yang menampilkan image secara random. Dimana akan berganti-ganti tergantung jumlah foto dan informasi yang kita masukan ke dalamnya.

DEMO

http://distro-baju.blogspot.com

Bagaimana cara membuatnya ? Ikuti langkah-langkah berikut ini :

Langkah 1

1. Login ke Blogger
2. Pilih Tata Letak / Rancangan
3. Pilih Tab Edit HTML
4. Centang "Expand Template Widget"
5. Silakan Cari Kode ]]></b:skin> dan Taruh Kode Berikut Di atas kode ]]></b:skin>

/* Image Slideshow */
#s3slider{margin-bottom:5px; width:100%; /* important to be same as image width */height:250px; /* important to be same as image height */position:relative; /* important */word-wrap:break-word; /* fix for long text breaking sidebar float in IE */overflow:hidden; /* fix for long non-text content breaking IE sidebar float */}
#s3sliderContent{width:100%; /* important to be same as image width or wider */position:absolute; /* important */top:0; /* important */margin:0px; padding-left:0px; /* important */}
.s3sliderImage{float:left; /* important */position:relative; /* important */display:none; /* important */}
.s3sliderImage span{position:absolute; /* important */left:0; font:normal 11px 'Arial',Helvetica,sans-serif; padding:10px; width:100%; text-align:center; padding-left:0px; background-color:#000; filter:alpha(opacity=70); /* here you can set the opacity of box with text */-moz-opacity:0.7; /* here you can set the opacity of box with text */-khtml-opacity:0.7; /* here you can set the opacity of box with text */opacity:0.7; /* here you can set the opacity of box with text */color:#fff; display:none; /* important */top:0; /*if you puttop:0; ->the box with text will be shown at the top of the imageif you putbottom:0; ->the box with text will be shown at the bottom of the image*/}

6. Kemudian Setelah itu coba cari kode </head> dan Taruh Kode berikut, di atas kode </head>

7. Save Template

Langkah 2

Untuk Bisa Menikmati widget ini silakan perhatikan instruksi di bawah ini :

1. Login ke Blogger
2. Pilih Tata Letak Atau Rancangan
3. Pilih Tab Edit HTML
4. Jangan Lupa Untuk buat Backupa data anda
5. Centang expand template widget
6. Cari Kode ini <div id='main-wrapper'>
Tekan Ctrl+F untuk mempermudahnya
7. Copy kode di bawah ini dan Paste tepat di bawah kode <div id='main-wrapper'>

<b:if cond='data:blog.pageType != "item"'>

<div id='s3slider'>

<ul id='s3sliderContent'>

<li class='s3sliderImage'>

<a href='http://www.kucoba.com/2010/07/10-tanda-cewek-suka-ma-kita.html'>

<img height='245'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigFbK_tGCW8KLgDrPToN9nxp8py5sD8exDjAs1Ki5gyxiBXYKVQLsM1bt05tI1sEoGc6zlWlPvrel0qi4QeywlCragicc7B-DGZexxJ-nX2udXxIusY35zgAOF2cU6Ha5xPI1XPLRi-DT3/s1600/1.jpg'
width='450'/>

<span>Isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image akhiri dengan titik.</span></a></li>

<li class='s3sliderImage'>

<a href='#'>

<img height='245'
src='#'
width='450'/>

<span>Isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image.</span></a></li>

<li class='s3sliderImage'>

<a href='#'>

<img height='245'
src='#'
width='450'/>

<span>Isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image.</span></a></li>

<li class='s3sliderImage'>

<a href='#'>

<img height='245'
src='#'
width='450'/>

<span>Isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image.</span></a></li>

<li class='s3sliderImage'>

<a href='#'>

<img height='245'
src='#'
width='450'/>

<span>Isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image.</span></a></li>

<div class='clear s3sliderImage'/>

</ul>

</div>

</b:if>

Keterangan :

Ganti warna merah dengan alamat link artikel kamu
Ganti warna hijau dengan link gambar / foto
Arti kode width="468" height="245" adalah ukuran dari widget slideshow view, lebar="468" tinggi="245" (atur sesuai ukuran widget yang kamu inginkan)
<span>Isi dengan kalimat yang ingin di tampilkan di atas foto.</span>
Jumlah Slide Show bisa anda perbanyak dengan menambahkan kode <li><a href="#"><img height='245' src="#" width='468'/> <span>isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image jangan lupa akhiri dengan titil atau tanda kalimat lainnya .</span></a></li> di atas kode </ul>

Memang agak panjang sob cara penerapanya, jadi pelan-pelan saja dan cek dengan teliti untuk menghindari kesalahan.

Cukup sekian tips blog Cara Membuat Slideshow Widget Photo. Semoga bermanfaat.

Source

Tips Blogging dan internet

Cara Membuat Receant Post Thumbnail

✔ Jaringan Share 4:11:00 PM Comment

Tips blog kali ini adalah cara membuat receant post thumbnail di blog. Widget ini berguna untuk menampilkan postingan terbaru kita dengan memiliki thumbnail dan keterangan posting nya, penempatan widget ini biasanya ditaruh di sidebar blog.

Bagaimana cara membuatnya ? untuk membuat receant post thumbnail di blog ini sangat mudah, sobat tinggal copy kode di bawah ini, lalu paste di add gadget HTML blog :

<right><style> img.recent_thumb
{padding-right:5px;padding-left:padding-bottom:0px;0px;width:55px;height:40px;border:0;float:left;margin:0 0 5px 0px;}
.recent_posts_with_thumbs
{float: left;width: 100%;min-height: 50px;margin: 0px 0px 5px 0px;padding: 0;font-size:15px;font-color:black;font-family:calibri;}
ul.recent_posts_with_thumbs li
{padding-bottom:5px;padding-top:5px;padding-left:0px;padding-right:20px;min-height:50px;list-style:normal;}
.recent_posts_with_thumbs a
{text-decoration:none;}
.recent_posts_with_thumbs normal
{font-size:13px;}
</style> <script style="text/javascript" src="http://bloggerplugins.org/scripts/recentpostswiththumbs.js"></script>
<script style="text/javascript"> var numposts = 8; var showpostthumbnails = true; var displaymore = false; var displayseparator = false; var showcommentnum = false; var showpostdate = false; var showpostsummary = false; var numchars = 75; </script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script></right>

Bagaimana mudah bukan sob ? semoga Cara Membuat Recent Post Thumbail ini bermanfaat.

Saturday, November 17, 2012

Belajar SEO Tips Blogging dan internet

Apa Itu Sitemap

✔ Jaringan Share 2:08:00 PM Comment

Ada salah satu sobat blogger yang bertanya kepada saya, " kang sitemap itu apa ya ? dan pengaruh sitemap untuk SEO bagaimana ?. Langsung saja saya nanya mbah google,dan akhirnya saya membuat post yang saya kasih judul apa itu sitemap. Berikut ulasan singkatnya, kalau kurang jelas infonya, silahkan sobat tambahkan sendiri ya.

Apa Itu Sitemap ?

Sitemap artinya petasitus.Kalau mendengar kata peta, pasti sobat sudah kebayang dong seperti apa. Dengan melihat peta, kita bisa melihat isi dari seluruh dunia ini walaupun hanya dari sebuah kertas atau bola, indonesia sebelah mana, malaysia sebelah mana, dll. Sitemap intinya sama dengan peta, dengan adanya sitemap pengunjung dan search engine bisa melihat isi dari seluruh web/blog sobat. Bentuk dari sitemap berupa navigasi link yang terdiri dari posting , kategori , tag , yang telah sobat publikasikan di web/blog sobat.

Pengaruh sitemap untuk SEO ?

Walaupun saya tidak tahu pasti bagaimana pengaruhnya untuk SEO, tapi coba saya kasih perumpamaan saja. Ada istilah " Tak Kenal Maka Tak Sayang ". Kalau sobat blogger baru ketemu atau baru kenal seseorang, mungkin gak langsung ada perasaan sayang sama orang itu ? pasti enggak kan. Tapi setelah lama kelamaan, karena banyak komunikasi,sering ngobrol,sering ketemu, dll, akhirnya sobat tahu, ternyata sifat asli orang ini begini, kebiasaanya begini,tinggal dsini,dll. Intinya sobat sudah tahu secara detil informasi mengenai orang itu, nah kalau sudah saling kenal begini barulah muncul perasaan sayang dan saling mempercayai. Mbah google pun juga demikian, gak mungkin langsung sayang bgitu saja dengan web/blog sobat, pasti dia butuh waktu dulu untuk mengenali web/blog sobat, maka dari itu kita harus memberikan informasi yang jelas mengenai web/blog kita dengan membuat sitemap di web/blog kita.

Menurut wikipedia : Sitemap adalah sebuah crawl atau (mesin perayap) yang berfungsi untuk mengambil data dan statistika blog anda dengan Bot (robot) yang dibuat oleh beberapa mesin pencari . Seperti Googlebot , Slurp (yahoo) , dan lainnya. Bot berguna sebagai pemeriksa dari isi atau konten blog anda , jika pengunjung banyak dan konten anda unik dan popularitasnnya tinggi maka Bot dari Search engine akan merayap web anda sehingga mudah dicari pada search enginenya.

Kalau google sudah kenal dan akrab dengan web/blog kita, maka kita akan diberi hadiah dan penghargaan oleh mbah google, yaitu web/blog kita bisa nangkring di posisi halaman pertama google, dan pastinya masih banyak hadiah-hadiah yang lain :)

Cara Membuat Sitemap ?
Untuk membuat sitemap di blogspot, sobat tingal masukkan kode berikut pada halaman/postingan sobat :

<link href="http://sites.google.com/site/congcot/kode-1/CCcss1.css" media="screen" rel="stylesheet" type="text/css"></link> <script src="http://sites.google.com/site/congcot/kode-1/CCjs1.js">

</script> <script src="http://kimzaqi.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc">

</script> <script type="text/javascript">
var accToc=true;
</script> <script src="http://sites.google.com/site/congcot/kode-1/CCjs2.js" type="text/javascript">

</script>

Note : Sobat ganti URL alamt blog saya diatas dengan milik sobat sendiri.

Sampai disini sudah habis nih sob postingan mengenai Apa Itu Sitemap. Kalau ada yang kurang, silahkan sobat tambahkan sendiri.

Semoga bermanfaat

Social Media

Cara Membuat Tombol Share Melayang

✔ Jaringan Share 9:00:00 AM Comment

Tips blog kali ini adalah cara membuat tombol share melayang di blog. Buat sobat blogger yang ingin memasang widget tombol share ke social media, mungkin alternatifnya bisa memakai tombol share melayang ini. Seperti yang kita ketahui, tombol share sosial media sangat penting untuk blog kita, disamping untuk meningkatkan pengunjung, tombol share akan membantu kepada pembaca untuk membagi artikel kita ke media yang lain, seperti share di facebook, share di twitter dll.

Penampakan tombol share melayang nya seperti dibawah ini :

Gambar diatas menampilkan banyak kombinasi tombol share di blog, like facebook, share facebook,twitter juga digg. Sudah cukup lengkap kan sob tombol share melayang diatas?
Lalu bagaimana cara membuatnya ? ikuti tutorial dibawah ini:

Cara membuat tombol share melayang di blog :

Masuk ke blogger kamu.
Klik Rancangan.
Tambah gadget dan pilih HTML/Javascript.
Lalu copy dan paste kode dibawah ini.

<style>

#pageshare {position:fixed; bottom:15%; left:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px

0;z-index:10;}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

</style>
<div id='pageshare' title="Share This With Your Friends">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>
<div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/><div style="clear: both;font-size: 12px;text-align:center;"><a href="http://kimzaqi.blogspot.com" target="blank"><font color="black">[Get This]<font></font></font></a></div></div>

Klik save dan lihat hasilnya

Cukup sekian tips blog cara membuat tombol share melayang. Semoga bermanfaat

Edit Menu

Cara Membuat Menu Dropdown Warna

✔ Jaringan Share 6:18:00 AM Comment

Satu lagi nih sob tips blog cara membuat menu dropdown di blogspot. Menu ini mempunyai warna yang berbeda di setiap masing-masing sub menu, total terdapat 8 sub menu. untuk demonya saya tidak menyediakan live demo, jadi sobat lihat gambar ini saja.

Cara Membuatnya :

Masukkan kode berikut sebelum ]]></b:skin>

#css-menu {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #FF7E00;
    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqXasrD5VOI7bmF0rg1E7teipZIBXkElfZG_Goq3jiS5gSxUZg2HMOPyv5AhLdWv3bLrvEmdFkalYDBvUn6OUmVUJprOenhQumFad1cdnMpZsbCnbwVN6DhkxVlcxZR7WeVEhlkmOMoak/s26/bg-nav-foot.jpg");
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    height: 46px;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}
.nav {
    float: left;
    height: 26px;
    line-height: 1;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    z-index: 99;
}
.nav a {
    -moz-text-blink: none;
    -moz-text-decoration-color: -moz-use-text-color;
    -moz-text-decoration-line: none;
    -moz-text-decoration-style: solid;
    color: #111111;
    display: block;
    position: relative;
    z-index: 100;
}
.nav li {
    float: left;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 5px;
    margin-top: 0;
}
.nav li a {
    -moz-font-feature-settings: normal;
    -moz-font-language-override: normal;
    -moz-text-blink: none;
    -moz-text-decoration-color: -moz-use-text-color;
    -moz-text-decoration-line: none;
    -moz-text-decoration-style: solid;
    -x-system-font: none;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfqe0Fibr1kqVMsHjtn8YFt4UlP9HslQjLfnJOi4wGnqi5FsvP9MxmrnOiOfGrCcJ4k-P-xDgpqM5uxU05CQVf88MFVdAQ8KiYeaqptgsA0BT3Q5NbNJevwLfYzu4UUqfrjvocy4P1HCA/s48/li-right.jpg");
    background-origin: padding-box;
    background-position: right top;
    background-repeat: no-repeat;
    background-size: auto auto;
    font-family: Arial,serif;
    font-size: 12px;
    font-size-adjust: none;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: bold;
    line-height: 15px;
    padding-bottom: 6px;
    padding-left: 10px;
    padding-right: 0;
    padding-top: 6px;
}
.nav li a span {
    color: #FFFFFF;
    font-weight: bold;
    padding-bottom: 4px;
    padding-left: 0;
    padding-right: 12px;
    padding-top: 5px;
}
.nav li.current-cat a, .nav li.current-cat a, .nav li:hover a, .nav li a:hover {
    -moz-font-feature-settings: normal;
    -moz-font-language-override: normal;
    -moz-text-blink: none;
    -moz-text-decoration-color: -moz-use-text-color;
    -moz-text-decoration-line: none;
    -moz-text-decoration-style: solid;
    -x-system-font: none;
    color: #FFFFFF;
    font-family: Arial,serif;
    font-size: 12px;
    font-size-adjust: none;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 15px;
    margin-bottom: 0;
}
.nav li:hover span, .nav li a:hover span {
    font-weight: bold;
}
.nav li.current-cat a {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #111111;
    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigAoPNUCB6le4tnT7bKqQGrMSbXikqH_H-UF96-ONHlRlbSNZqcDMQ_f-ShHf1hqB-dyPP-rtP6tDVJBv5YXc-s-QJiBCRb-92A7Zk2Ns5m6dozKgldIwhfWBYk2PCecPzbAHb5lHwvGY/s101/hnjn.gif");
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat-x;
    background-size: auto auto;
    color: #EEEEEE;
    height: 16px;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: -1px;
    padding-left: 10px;
    padding-top: 7px;
    width: 100px;
}
.nav li.current-cat a span {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDEjZQTFQfd_rjlaVjGYWG_F_JPraD9b0ftrg7jU8oj2GKZ-P_XPB82c3pdGWbrV9SB456qPcchQSbyyotlYHsUlTQ2n-DR0GQzCrzfXV4hC5rlr8nS-sneKsMtghcrpmEObLMcsQ36C0/s18/hbhjs.png");
    background-origin: padding-box;
    background-position: 0 center;
    background-repeat: no-repeat;
    background-size: auto auto;
    padding-left: 20px;
}
.nav li.news:hover, .nav li.news:hover ul {
    background-color: black;
}
.nav li.news1:hover, .nav li.news1:hover ul {
    background-color: #017CB5;
}
.nav li.news1:hover ul li {
    border-bottom-color: #014F73;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-top-color: #038BCA;
    border-top-style: solid;
    border-top-width: 1px;
}
.nav li.news2:hover, .nav li.news2:hover ul {
    background-color: #A92267;
}
.nav li.news2:hover ul li {
    border-bottom-color: #701544;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-top-color: #C72B7B;
    border-top-style: solid;
    border-top-width: 1px;
}
.nav li.news3:hover, .nav li.news3:hover ul {
    background-color: #0F5594;
}
.nav li.news3:hover ul li {
    border-bottom-color: #0A3963;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-top-color: #166BB7;
    border-top-style: solid;
    border-top-width: 1px;
}
.nav li.news4:hover, .nav li.news4:hover ul {
    background-color: #693770;
}
.nav li.news4:hover ul li {
    border-bottom-color: #45254A;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-top-color: #9A52A4;
    border-top-style: solid;
    border-top-width: 1px;
}
.nav li.news5:hover, .nav li.news5:hover ul {
    background-color: #3B6A06;
}
.nav li.news5:hover ul li {
    border-bottom-color: #264404;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-top-color: #4D8909;
    border-top-style: solid;
    border-top-width: 1px;
}
.nav li.news6:hover, .nav li.news6:hover ul {
    background-color: #46505C;
}
.nav li.news6:hover ul li {
    border-bottom-color: #252A30;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-top-color: #5C6978;
    border-top-style: solid;
    border-top-width: 1px;
}
.nav li.news7:hover, .nav li.news7:hover ul {
    background-color: #1B227D;
}
.nav li.news7:hover ul li {
    border-bottom-color: #10154B;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-top-color: #212994;
    border-top-style: solid;
    border-top-width: 1px;
}
.nav li.news8:hover, .nav li.news8:hover ul {
    background-color: #9A1313;
}
.nav li.news8:hover ul li {
    border-bottom-color: #650D0D;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-top-color: #B81919;
    border-top-style: solid;
    border-top-width: 1px;
}
.nav li.news9:hover, .nav li.news9:hover ul {
    background-color: #A92267;
}
.nav li.news9:hover ul li {
    border-bottom-color: #741847;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-top-color: #C52C7A;
    border-top-style: solid;
    border-top-width: 1px;
}
.nav li.news1:hover ul li.first, .nav li.news2:hover ul li.first, .nav li.news3:hover ul li.first, .nav li.news4:hover ul li.first, .nav li.news5:hover ul li.first, .nav li.news6:hover ul li.first, .nav li.news7:hover ul li.first, .nav li.news8:hover ul li.first, .nav li.news9:hover ul li.first {
    border-top-color: -moz-use-text-color;
    border-top-style: none;
    border-top-width: 0;
}
.nav li.news1:hover ul li.last, .nav li.news2:hover ul li.last, .nav li.news3:hover ul li.last, .nav li.news4:hover ul li.last, .nav li.news5:hover ul li.last, .nav li.news6:hover ul li.last, .nav li.news7:hover ul li.last, .nav li.news8:hover ul li.last, .nav li.news9:hover ul li.last {
    border-bottom-color: -moz-use-text-color;
    border-bottom-style: none;
    border-bottom-width: medium;
}
.nav li a:hover, .nav li a:active {
    color: #B80000;
}
.nav li ul {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #FFFFFF;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    left: -999em;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 1px;
    margin-top: 0;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 0;
    padding-top: 5px;
    position: absolute;
    width: 168px;
    z-index: 999999;
}
.nav .last ul {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #FFFFFF;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    margin-bottom: 0;
    margin-left: 1px;
    margin-right: 1px;
    margin-top: 0;
    position: absolute;
    width: 168px;
    z-index: 999;
}
.nav li ul li {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    border-bottom-color: -moz-use-text-color;
    border-bottom-style: none;
    border-bottom-width: medium;
    border-image-outset: 0 0 0 0;
    border-image-repeat: stretch stretch;
    border-image-slice: 100% 100% 100% 100%;
    border-image-source: none;
    border-image-width: 1 1 1 1;
    border-left-color-ltr-source: physical;
    border-left-color-rtl-source: physical;
    border-left-color-value: -moz-use-text-color;
    border-left-style-ltr-source: physical;
    border-left-style-rtl-source: physical;
    border-left-style-value: none;
    border-left-width-ltr-source: physical;
    border-left-width-rtl-source: physical;
    border-left-width-value: medium;
    border-right-color-ltr-source: physical;
    border-right-color-rtl-source: physical;
    border-right-color-value: -moz-use-text-color;
    border-right-style-ltr-source: physical;
    border-right-style-rtl-source: physical;
    border-right-style-value: none;
    border-right-width-ltr-source: physical;
    border-right-width-rtl-source: physical;
    border-right-width-value: medium;
    border-top-color: -moz-use-text-color;
    border-top-style: none;
    border-top-width: medium;
    clear: both;
    margin-left: 0;
    padding-bottom: 5px;
    padding-left: 0;
    padding-right: 0;
    padding-top: 5px;
    width: 160px;
}
.nav li ul li a {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    color: #FFFFFF !important;
    font-size: 12px;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    text-transform: none;
}
.nav li:hover ul li a {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    font-weight: bold;
}
.nav li:hover, .nav li.hover {
    position: static;
}
.nav li:hover ul ul, .nav li:hover ul ul ul, .nav li:hover ul ul ul ul {
}
.nav li:hover ul, .nav li li:hover ul, .nav li li li:hover ul, .nav li li li li:hover ul {
    left: auto;
}

Kemudian save, dan masukkan kode HTML berikut ini :

<div id='css-menu'>
<ul class='nav'>
<li class='current-cat iconhome'><a href='/'><span>Home</span></a></li>
<li class='news1'><a href='#'><span>Css menu 1</span></a>
<ul class='children'>
<li class='first'><a href='#'>Submenu 1.1</a></li>
<li><a href='#'>Submenu 1.2</a></li>
<li><a href='#'>Submenu 1.3</a></li>
<li><a href='#'>Submenu 1.4</a></li>
<li><a href='#'>Submenu 1.5</a></li>
<li class='last'><a href='#'>Submenu 1.6</a></li>
</ul>
</li>
<li class='news2'><a href='#'><span>Css menu 2</span></a>
<ul class='children'>
<li class='first'><a href='#'>Submenu 2.1</a></li>
<li><a href='#'>Submenu 2.2</a></li>
<li><a href='#'>Submenu 2.3</a></li>
<li><a href='#'>Submenu 2.4</a></li>
<li><a href='#'>Submenu 2.5</a></li>
<li class='last'><a href='#'>Submenu 2.6</a></li>
</ul>
</li>
<li class='news3'><a href='#'><span>Css menu 3</span></a>
<ul class='children'>
<li class='first'><a href='#'>Submenu 3.1</a></li>
<li><a href='#'>Submenu 3.2</a></li>
<li><a href='#'>Submenu 3.3</a></li>
<li><a href='#'>Submenu 3.4</a></li>
<li><a href='#'>Submenu 3.5</a></li>
<li class='last'><a href='#'>Submenu 3.6</a></li>
</ul>
</li>
<li class='news4'><a href='#'><span>Css menu 4</span></a>
<ul class='children'>
<li class='first'><a href='#'>Submenu 4.1</a></li>
<li><a href='#'>Submenu 4.2</a></li>
<li><a href='#'>Submenu 4.3</a></li>
<li><a href='#'>Submenu 4.4</a></li>
<li><a href='#'>Submenu 4.5</a></li>
<li class='last'><a href='#'>Submenu 4.6</a></li>
</ul>
</li>
<li class='news5'><a href='#'><span>Tên menu 5 </span></a>
<ul class='children'>
<li class='first'><a href='#'>Submenu 5.1</a></li>
<li><a href='#'>Submenu 5.2</a></li>
<li><a href='#'>Submenu 5.3</a></li>
<li><a href='#'>Submenu 5.4</a></li>
<li><a href='#'>Submenu 5.5</a></li>
<li class='last'><a href='#'>Submenu 5.6</a></li>
</ul>
</li>
<li class='news6'><a href='#'><span>Css menu 6</span></a>
<ul class='children'>
<li class='first'><a href='#'>Submenu 6.1</a></li>
<li><a href='#'>Submenu 6.2</a></li>
<li><a href='#'>Submenu 6.3</a></li>
<li><a href='#'>Submenu 6.4</a></li>
<li><a href='#'>Submenu 6.5</a></li>
<li class='last'><a href='#'>Submenu 6.6</a></li>
</ul>
</li>
<li class='news7'><a href='#'><span>Css menu 7</span></a>
<ul class='children'>
<li class='first'><a href='#'>Submenu 7.1</a></li>
<li><a href='#'>Submenu 7.2</a></li>
<li><a href='#'>Submenu 7.3</a></li>
<li><a href='#'>Submenu 7.4</a></li>
<li><a href='#'>Submenu 7.5</a></li>
<li class='last'><a href='#'>Submenu 7.6</a></li>
</ul>
</li>
<li class='news8'><a href='#'><span>Css menu 8</span></a>
<ul class='children'>
<li class='first'><a href='#'>Submenu 8.1</a></li>
<li><a href='#'>Submenu 8.2</a></li>
<li><a href='#'>Submenu 8.3</a></li>
<li><a href='#'>Submenu 8.4</a></li>
<li><a href='#'>Submenu 8.5</a></li>
<li class='last'><a href='#'>Submenu 8.6</a></li>
</ul>
</li>
</ul>
<div class='clear'/>
</div>

Oke,,cukup sekian tips blog kali ini, Cara Membuat Menu Dropdown Warna.

Semoga bermanfaat

Thursday, November 15, 2012

Edit Releated Post

Cara Membuat Releated Post Dengan Thumbnail

✔ Jaringan Share 7:24:00 PM Comment

Selamat pagi sobat blogger, satu lagi nih tips blog cara membuat releated post dengan thumbnail. Kalo sobat blogger ingin melihat koleksi saya , bagaimana membuat releated post dengan thumbnail, bisa dilihat di artikel Cara Membuat Related Post Thumbnail di Blog, Cara Membuat Releated Post Bergerak - Carousel Related Post , Cara MengCustom Releated Post dengan Linkwithin. Nah itu adalah beberapa koleksi saya sebelumnya bagaimana membuat releated post dengan thumbnail.

Lalu apa yang membedakan releated post dengan thumbnail kali ini, untuk jelas nya sobat lihat gambar dibawah ini. Penampilan nya hanya thumbnail saja, tapi ketika krusor kita arahkan ke thumbnailnya, akan muncul keterangan judul posting. Kalau mau lihat Live demonya, sobat berkunjung saja ke blogger www.idblogdesign.com, sobat lihat releated post nya, penampilan nya hampir sama seperti itu :

Okey,langsung saja, bagaimana cara membuat releated post dengan thumbnail ini :

Masuk Pada Blogger
Jangan lupa backup template agar jika terjadi kesalahan template bisa di restore kembali.
Backup template pada interface baru Blogger:
Template >> Cadangkan/Pulihkan >> Unduh Template Lengkap
Selanjutnya kembali pilih Template >> Edit HTML >> Lanjutkan
Centang Expand template Widget cari kode : ]]></b:skin>

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

ul#related-posts{
font-family:"Droid Sans",Helvetica,Arial,sans-serif;
font-size:10px;
list-style: none;
margin: 20px 0;
padding: 0;
text-transform: none;
}
ul#related-posts li{
float: left;
height: auto;
margin:0 5px;
padding: 2px 1px 2px;
list-style-type:none;
}
*html ul.rp#related-posts li{
margin:0 13px;
}
ul#related-posts li a {
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
border: 2px solid #FFFFFF;
display: block;
height: 72px;
position: relative;
width: 72px;
}
ul#related-posts li a {
color: #474C51;
text-decoration: none;
text-shadow: 0 1px 0 #FFFFFF;
}
ul#related-posts li .overlay {
height: 66px;
line-height: 16px;
padding:6px 0 0 6px;
position: absolute;
width: 66px;
z-index: 10;
}
ul#related-posts li .overlay {
}
ul#related-posts li a:hover .overlay {
background: #fff;
display: block !important;
opacity:0.9;
}
ul#related-posts li img {
bottom: 0;
padding:0px !important;
}
ul#related-posts li a:hover {
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

Selanjutnya cari kode:

Pencarian 1 : <div class='post-footer'> jika tidak ketemu ganti pencarian menjadi Pencarian 2
Pencarian 2 : <div class='post-footer-line post-footer-line-1'>

Letakkan kode berikut dibawah kode hasil pencarian 1 atau 2 :

<b:if cond='data:blog.pageType == "item"'><h3>Related Posts</h3>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL8dbbpSfvKnRcIn5h99WaFZ6ehPGsssswrNWtdGxgumpZIJVwMZqbBeln3OViq5EgS9L_Yzo0MjUnLZ8MtEHSLoxqdq_bWW-RWS9Kh9eRlF0aA3ditss36n5vZfS0yZkDd2RZ_2HUJ-A/s1600/no-image.gif";
var maxresults=6;
</script>
<script src='http://suyb.googlecode.com/files/rph.js' type='text/javascript'/>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<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:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</b:if><div style='clear:both'/>
<br/>

Simpan Template dan Lihat Hasilnya.
Okey, cukup sekian tips blog kali ini cara membuat releated post dengan thumbnail

Semoga Bermanfaat.

Tuesday, November 13, 2012

Edit Menu

Cara Membuat Menu Unik Dengan Tooltip

✔ Jaringan Share 5:34:00 PM Comment

Tips blog kali ini adalah cara membuat menu unik dengan tooltip. Lalu apa yang membuat unik menu ini ? Yang membuat nya unik adalah menu ini mempunyai tooltip saat krusor kita arahkan ke menu nya, walaupun tidak memiliki sub menu, menu ini tetap terlihat keren dan unik.

DEMO

1. Login ke blog kamu.

2. Pilih Rancangan > Edit HTML > Cari kode </head>

3. Setelah ketemu letakan kode di bawah ini tepat di atas kode </head>

Simpan Template dan kembali lagi kemenu awal.
Klik Add Gadget > pilih HTML JavaScript > Copy kode di bawah ini.

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href="http://blazerracing.blogspot.com/" class="tooltip" title="Back To Home">Home</a></li>
<li><a href="http://blazerracing.blogspot.com/" class="tooltip" title="Download Naruto Shippuden Episode">Naruto</a></li>
<li><a href="http://blazerracing.blogspot.com/" class="tooltip" title="Dapatkan Tutorial Blogger Di Blazer Blog">Blogger</a></li>
<li><a href="http://blazerracing.blogspot.com/" class="tooltip" title="Dapatkan Artikel menarik dan unik dari Blazer Blog">Unik Aneh</a></li>
<li><a href="http://blazerracing.blogspot.com/" class="tooltip" title="Dapatkan Info Kesehatan Dari Blazer Blog">Health</a></li>
<li><a href="http://blazerracing.blogspot.com/" class="tooltip" title="Dapatkan Info Travel Di Seluruh Dunia Dari Blazer Blog">Travelling</a></li>
<li><a href="http://blazerracing.blogspot.com/" class="tooltip" title="Gabung di Community Blazer Blog">Community</a></li>
<li><a href="http://www.facebook.com/BLAZERBLOG" class="tooltip" title="Follow Blazer Blog On Facebook">Facebook</a></li>
<li><a href="http://twitter.com/blazer_blog" class="tooltip" title="Follow Blazer Blog On Twitter">Twitter</a></li>
</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>

Ganti kode yang dicetak tebal dengan nama tujuan dari link yang anda pasang.
Ganti kode yang dicetak miring dengan URL yang dituju.
Ganti kode yang berwarna biru dengan DESKRIPSI TOOLTIP dari masing-masing link.

Meskipun Script nya panjang, tapi ga ngarus 1% pun pada kecepatan blog sobat.

Cukup sekian Tips Blog kali ini, semoga bermanfaat.

Script by : blazerracing.blogspot.com