Draft Blogger

Cara Membuat Tex Box Dengan Hover Effect Css3

noreply@blogger.com (Anonymous) — Thu, 28 Mar 2013 02:52:00 +0000

Selamat siang sobat blogger setelah senelumnya kita membahas tentang Membuat Widget TOP Comentator kali ini Kolom Tutorial™ akan mencoba sebuah tutorial sederhana dengan teknik CSS Hover effect, Tutorial kita kali ini adalah tentang pembuatan Tex Box Dengan Hover Effect Css3, freviewnya kurang lebih seperti pada gambar dibawah ini :

elamat siang sobat blogger setelah senelumnya kita membahas tentang Membuat Widget TOP Comentator kali ini Kolom Tutorial™ akan mencoba sebuah tutorial sederhana dengan teknik CSS Hover effect, Tutorial kita kali ini adalah tentang pembuatan Tex Box Dengan Hover Effect Css3, freviewnya kurang lebih seperti pada gambar dibawah ini :

VIEW A DEMO

Dan sobat mari kita lanjut ke tutornya :

1. Seperti biasa Login ke Akun Blogger sobat

2. Klik Template Klik Edit HTML
3. Jangan Lupa Centang Expand Widget Template
4. Cari kode ]]></b:skin> dan letakan kode CSS dibawah tepat diatas kode

CSS

 .KTboxmessage
{
color: white;
background-color: black;
width: 500px;
margin: 5px 60px;
padding: 20px 20px 20px 20px;
border: 2px dotted lightgrey;
border-radius: 10px;
box-shadow: -1px -1px 12px 2px gainsboro;
transition: background-color .777s;
-webkit-transition: background-color .777s;
-moz-transition: background-color .777s;
-o-transition: background-color .777s;
-ms-transition: background-color .777s;
}

.KTboxmessage:hover
{
background-color: CornflowerBlue ;

}
.KTboxmessage:active
{
background-color: darkgreen ;
}

5. Klik Save

Keterangan :

Untuk Penulisan dalam postingan atau widget gunakan kode :

Html

<div class="KTboxmessage" style="font-family: &quot;Courier New&quot;

,Courier,monospace;">LetakanTulisan Atau Kode Disini</div>

Ok soba, selamat berkreasi sekian artikel tentangmembuat Tex Box Dengan Hover Effect Css3, happy blogging and enjoy.

Modul/Widget Tracking Pengiriman JNE, TIKI & POS

noreply@blogger.com (Anonymous) — Thu, 14 Mar 2013 17:26:00 +0000

Bagi anda pelaku usaha yang memiliki website atau blog sebagai toko virtual di dunia maya, aktivitas pengiriman barang melalui jasa kurir pasti merupakan hal yang biasa dan lumrah. Tak jarang juga pelanggan yang menanyakan nomor resi pengiriman untuk mengetahui progress dari barang yang dipesannya. Berdasarkan pengalaman pribadi, ada tiga jasa kurir/pengiriman barang yang paling sering digunakan para pelanggan, yakni JNE, TIKI, dan POS Indonesia. Pelanggan yang ingin mengecek nomor resinya pun harus membuka website dari penyedia jasa pengiriman tersebut. Namun akan terkesan lebih elegan dan profesional jika di website/blog toko online anda menyediakan fitur untuk mengecek nomor resi ketiga jasa pengiriman tsb, yakni JNE, TIKI atau POS. Dampaknya pun sangat baik bagi toko online anda, yakni lebih sering dikunjungi pelanggan sehingga meningkatkan jumlah visitor website/blog tentunya.

Dengan menggunakan teknik form method get atau post yang disesuaikan dengan website dari masing-masing jasa pengiriman, anda dapat memasang widget form pengecekan nomor resi yang terhubung langsung dengan database jasa pengiriman tsb.

Berikut akan saya share kode html widget tracking pengiriman / pengecekan nomor resi yang dapat dipasang di website atau di blogspot dengan menambahkan widget HTML terlebih dahulu.

Kode Widget HTML Cek Nomor Resi / Tracking Pengiriman TIKI:

<form method="post" action="http://www.tiki-online.com/tracking/track_single" name="input" target="_blank">
No Resi TIKI <br/>
<input id="TxtCon" name="TxtCon" type="text" />
<input id="button" name="button" type="submit" value="Track" /></form>

Kode Widget HTML Cek Nomor Resi / Tracking Pengiriman JNE:

<form method="post" action="http://www.jne.co.id/index.php?mib=tracking&lang=IN" target="_blank">
Nomor Resi JNE <br />
<input name="awbnum" type="text" class="rightsearch" id="awbnum" size="26" />
<input type="submit" name="submittracking" class="btlogin" value="Track" id="trksubmit" />
</form>

Kode Widget HTML Cek Nomor Resi / Tracking Pengiriman POS INDONESIA:

<form method="get" action="http://www.posindonesia.co.id/home/modules/mod_search/tmpl/libs/lacakk1121m4np05.php" name="input" target="_blank">
<input type="hidden" name="lacak" value="Lacak" />
No Resi POS <br/>
<input name="barcode" type="text" />
<input type="submit" value="Submit" /></form>

Selamat Mencoba di Toko Online masing-masing!

ProPress

noreply@blogger.com (Anonymous) — Thu, 14 Mar 2013 15:57:00 +0000

ProPress

We are proud to release the ProPress Blogger Template as a free download. ProPress features a popping navigation menu in the header as well a 3 column footer.

Blog Platform: Blogger
Designed by: TheBlogTemplates
Features: 2 Columns, Blue, Fixed Width, Right Sidebar

The Read More Feature

To use the “Read More” Function for this template just put everything you want to “hide” between the following lines:
<span class="fullpost"> </span>
Example:
This is the part that will show up on the main page <span class="fullpost"> and this part will be hidden. </span>

Links in the Footer

If you choose to place links in the footer section make sure to put a list tag around each link.

<li>Link Code</li>

Example:

<li><a href="http://bSaves.com" mce_href="http://bSaves.com">Black Google</a></li>

The Subscribe and Follow Widget

Go to Layout and then click “Add a Gadget” in the sidebar. Add an “HTML/JavaScript” gadget and paste in the following code:

<div id="stats"> <p><a class="rss" href="http://feeds.feedburner.com/widgetsforfree" mce_href="http://feeds.feedburner.com/widgetsforfree" title="Subscribe via RSS">RSS</a><br /> <a class="twitter" href="http://twitter.com/bsaves" mce_href="http://twitter.com/bsaves" title="Follow Us on Twitter">Twitter</a><br /> <a class="youtube" href="http://www.youtube.com/howhero" mce_href="http://www.youtube.com/howhero" title="Join Our Youtube Community">uTube</a><br /> <a class="email" href="http://feedburner.google.com/fb/a/mailverify?uri=widgetsforfree&loc=en_US" mce_href="http://feedburner.google.com/fb/a/mailverify?uri=widgetsforfree&loc=en_US" title="Subscribe to Email Updates">Email</a></p> </div>

If you need any further help customizing the template, leave a comment below and we’ll be glad to help!

Field of Dreams" Blogger Template

noreply@blogger.com (Anonymous) — Thu, 14 Mar 2013 15:08:00 +0000

Here is another wonderful Blogger Template for you guys "Field of Dreams". As you can see, the template is very good,professional looking two column blogger template. Originally it was a wordpress theme designed by notsoboringlife.com. I converted it to Blogger Format.Hope you like it :)

After downloading the template, Unzip it and upload the xml file using the upload template option in Template » Edit html
»After uploading the template, you can convert the links and text at the top navbar (see the screenshot below)

Scroll down the template until you see this code:

Change the Anchor text (ex: Home,Pictures,Videos,Contact) and enter the corresponding url in between the a href tags
example:

Hope you like my work! More template are coming very very soon..(atleast a template each day). Please don't forget back and check for updates.

--------------------
Reply to Bernadette Anee's comment:

Go through the template code and find this

and replace the above code with this one

and Save the template.

-------------------------------
Adding Time stamp to your blog:-
NOTE: This is for those who downloaded the template before August 22,2008
-------------------------------
Go to Template » Edit html
and find this code (Control+F to search)

<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span>

and add this code just below the above code and Save the template.

<b:if cond='data:post.dateHeader'> on
<data:post.dateHeader/>
</b:if>

Wonderful Blogger Template "Connexion"

noreply@blogger.com (Anonymous) — Thu, 14 Mar 2013 14:43:00 +0000

Download Wonderful Blogger Template 'Connexion'-
Ok... as I promised before to design more and more Blogger templates for you guys.. here is my latest entry 'Connexion'.This was originally a wordpress theme designed by Jinsona of web2feel.com for wordpress.org users.I converted it to our friendly blogger :)

Please read the below instructions carefully: After uploading the template using the upload button in "Template »» Edit html", you have to do a couple of things.

1.Change the top navigation links to your desired ones..

this is how to do:-
Scroll down the template untill you find this piece of code...

<div id="'mainmenu'"> <ul><li>
<a href="'#'">HOME</a></li><li>
<a href="'#'">Pictures</a></li><li>
<a href="'#'">Videos</a></li><li>
<a href="'#'">Contact</a></li>
<br /><br /> </ul> </div>

and Replace the anchor text (Home,pictures,etc) and add the corresponding link replacing the # symbol

2. Change the RSS Feed link.

Find this code below

<div id="'rssbox'"><a href="'feeds.feedburner.com/yourfeed'"><img alt="'Subscribe'" src="'http://bloggertricks.com.googlepages.com/connexion-rss.gif'" style="'vertical-align:middle'/" /></a></div>

and Replace the feedburner link (http........./yourfeed) to your's and SAVE THE CHANGES.
Hope you like it! More template are on the way... don't forget to come back and check for updates!

3 Column Blogger Template 'Pepper'

noreply@blogger.com (Anonymous) — Thu, 14 Mar 2013 14:17:00 +0000

Here it is guys.. the todays template "Peppers 3 column Blogger Template".
Few people are asking me to design 3 column blogger templates over the past week and so.. So, here it is.. The template comes with well designed,fully packaged, 3 column dark Blogger layout.This wonderful design was first a wordpress theme designed by Jinsona of web2feel.com for Wordpress.org users. I converted it into our friendly Blogger format!

Releasing Wonderful Blogger Template 'CREATION'

noreply@blogger.com (Anonymous) — Thu, 14 Mar 2013 14:13:00 +0000

Download Wonderful Xml Blogger Template 'Creation'
Here is my today's Blogger Template.This template was very wonderfully designed,2 column Blogger(blogspot) template.This was originally a wordpress theme by Ophelia Nicholson of ophelianicholson.com. I converted that format to Blogger beta.

Stylish 3 Column Blogger Template

noreply@blogger.com (Anonymous) — Thu, 14 Mar 2013 14:05:00 +0000

A great 3 Column Blogger Template for you guys!
The template is very stylish,professional looking with a nice header logo at the top and you can put adsense 728 X 15 adsense link unit at the top which will maximise your CTR and your earnings.
This was originally a wordpress theme designed by Padd IT Solutions... and I converted that wp theme into Blogger format.

Cara Membuat Widget Hitung Mundur Tahun Baru Buat Blog

noreply@blogger.com (Anonymous) — Wed, 13 Mar 2013 17:04:00 +0000

Saya memodifikasi widget hitung mundur untuk Natal sedikit untuk mengaturnya untuk tahun baru. Widget ini dengan mudah dapat ditambahkan ke kedua blogspot atau wordpress. Cukup copy kode dan paste di template Anda. Saat tahun baru dimulai, widget akan memberi pesan peringatan : "SELAMAT BARU 2014 !" tepat pada Jam 12:00. Jam memiliki format standar, menit dan detik berdetak. Widget ini dibuat menggunakan script sederhana dengan tidak ada flash. Untuk jam flash silakan cek koleksi Jam flash.

Warna widget dan gaya dapat dirubah sebelum menambahkannya di blog anda.

Demo :

Counting Till 2014 »»

Pergi Untuk Blogger> Desain
Klik "Tambah gadget"
Pilih HTML / Javascript widget
Paste kode berikut di dalamnya,

<style style="text/css">
.lcdstyle{ /*Example CSS to create LCD countdown look*/
background:#fff;
color:#289728;
font: bold 20px arial;
padding: 15px;
border:5px solid #333333;
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
box-shadow: 5px 5px 5px #CCCCCC;

}
.lcdstyle sup{ /*Example CSS to create LCD countdown look*/
font-size: 120%
}
</style>
<script type="text/javascript">
function cdtime(container, targetdate){
if (!document.getElementById || !document.getElementById(container)) return
this.container=document.getElementById(container)
this.currentTime=new Date()
this.targetdate=new Date(targetdate)
this.timesup=false
this.updateTime()
}
cdtime.prototype.updateTime=function(){
var thisobj=this
this.currentTime.setSeconds(this.currentTime.getSeconds()+1)
setTimeout(function(){thisobj.updateTime()}, 1000) //update time every second
}
cdtime.prototype.displaycountdown=function(baseunit, functionref){
this.baseunit=baseunit
this.formatresults=functionref
this.showresults()
}
cdtime.prototype.showresults=function(){
var thisobj=this

var timediff=(this.targetdate-this.currentTime)/1000 //difference btw target date and current date, in seconds
if (timediff<0){ //if time is up
this.timesup=true
this.container.innerHTML=this.formatresults()
return
}
var oneMinute=60 //minute unit in seconds
var oneHour=60*60 //hour unit in seconds
var oneDay=60*60*24 //day unit in seconds
var dayfield=Math.floor(timediff/oneDay)
var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour)
var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute)
var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute))
if (this.baseunit=="hours"){ //if base unit is hours, set "hourfield" to be topmost level
hourfield=dayfield*24+hourfield
dayfield="n/a"
}
else if (this.baseunit=="minutes"){ //if base unit is minutes, set "minutefield" to be topmost level
minutefield=dayfield*24*60+hourfield*60+minutefield
dayfield=hourfield="n/a"
}
else if (this.baseunit=="seconds"){ //if base unit is seconds, set "secondfield" to be topmost level
var secondfield=timediff
dayfield=hourfield=minutefield="n/a"
}
this.container.innerHTML=this.formatresults(dayfield, hourfield, minutefield, secondfield)
setTimeout(function(){thisobj.showresults()}, 1000) //update results every second
}
/////CUSTOM FORMAT OUTPUT FUNCTIONS BELOW//////////////////////////////
//Create your own custom format function to pass into cdtime.displaycountdown()
//Use arguments[0] to access "Days" left
//Use arguments[1] to access "Hours" left
//Use arguments[2] to access "Minutes" left
//Use arguments[3] to access "Seconds" left
//The values of these arguments may change depending on the "baseunit" parameter of cdtime.displaycountdown()
//For example, if "baseunit" is set to "hours", arguments[0] becomes meaningless and contains "n/a"
//For example, if "baseunit" is set to "minutes", arguments[0] and arguments[1] become meaningless etc

function formatresults(){
if (this.timesup==false){//if target date/time not yet met
var displaystring=arguments[0]+" days "+arguments[1]+" hours "+arguments[2]+" minutes "+arguments[3]+" seconds left until December 25, 2013 12:05:00"
}
else{ //else if target date/time met
var displaystring=""
}
return displaystring
}
function formatresults2(){
if (this.timesup==false){ //if target date/time not yet met
var displaystring="<span class='lcdstyle'>"+arguments[0]+" <sup>days</sup> "+arguments[1]+" <sup>hours</sup> "+arguments[2]+" <sup>minutes</sup> "+arguments[3]+" <sup>seconds</sup></span> "
}
else{ //else if target date/time met
var displaystring="" //Don't display any text
alert("SELAMAT TAHUN BARU 2014!") //Instead, perform a custom alert
}
return displaystring
}
</script>
<table><tbody>
<tr>
<td>
<img style="float:left; " src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj7Cd3P6t33frwNWINeVic5vrPRR_ArvXKTJMtPTYsqP2xFTLYVVXnlAYlt4A8uTjlGiZHrRgQq_fZ-KOsYVAjw_k5qEs96fxuGFKOL1w7m8PSuT7XbMQNCtfRtiWscnRoo6SmTe32UGI/s400/NEW+YEAR.png" width="125px"/>
<h1 style="color:#289728; padding-top:40px;">Counting Till 2014 »»</h1><br/>
</td></tr>
<tr><td>
<div id="countdowncontainer"></div>
<br />
<div id="countdowncontainer2"></div>
<script type="text/javascript">
var futuredate=new cdtime("countdowncontainer", "March 14, 2013 12:05:00")
futuredate.displaycountdown("days", formatresults)
var currentyear=new Date().getFullYear()
//dynamically get this Christmas' year value. If Christmas already passed, then year=current year+1
var thischristmasyear=(new Date().getMonth()>=11 && new Date().getDate()>31)? currentyear+1 : currentyear
var christmas=new cdtime("countdowncontainer2", "December 31, "+thischristmasyear+" 0:0:00")
christmas.displaycountdown("days", formatresults2)
</script>
</td></tr>
</tbody></table>

Buat kustomisasi: Gunakan Kode Warna heksadesimal disini

Untuk mengubah warna font warna jam edit: # 289.728;
Untuk mengubah warna border perbatasan edit: 5px solid # 333333;
Untuk mengubah warna teks warna edit: # 289728.

5. Simpan widget Anda dan letakan tepat di atas halaman posting blog Anda.

Teks-teks ungu dapat dengan mudah diedit untuk setiap pesan yang Anda ingin menulis.

6. Selesai!

Lihat hasilnya. Selamat tahun baru untuk semua pembaca dan pengunjung meski masih lama beberapa bulan lagi he.he.. :)

Cara Membuat Block Quote Modern Styles

noreply@blogger.com (Anonymous) — Mon, 11 Mar 2013 12:01:00 +0000

Mari kita membuat beberapa gaya yang menarik dan modern untuk kutipan blok. Kami akan menggunakan teknik yang berbeda untuk menciptakan tampilan yang unik selama enam contoh.

Lihat demo

Hari ini kita akan membuat beberapa gaya blok kutipan mewah. Menggunakan tekstur, lingkaran, dan pseudo-elemen, kita dapat menaruh beberapa kehidupan ke kutipan dan testimonial.

Harap dicatat: hasil dari tutorial ini hanya akan bekerja sebagaimana dimaksud dalam browser yang mendukung CSS properti masing-masing.

Kami akan menghilangkan prefiks vendor dalam tutorial ini. Tapi Anda tentu akan menemukan mereka dalam file.

HTML

Html untuk blockquotes sebagai berikut:

<div class="mb-wrap mb-style-1">

    <div class="mb-thumb"></div>

    <blockquote cite="http://www.gutenberg.org/ebooks/1257">

        <p>Never fear quarrels, but seek hazardous adventures.</p>

    </blockquote>

    <div class="mb-attribution">

        <p class="mb-author">Alexandre Dumas</p>

        <cite><a href="http://www.gutenberg.org/ebooks/1257">The Three Musketeers</a></cite>

    </div>

</div>

Pembagian dengan kelas mb-jempol tidak akan hadir dalam semua contoh. Dalam contoh 3 kita benar-benar akan menambahkannya sebagai seorang anak untuk pembagian dengan kelas mb-atribusi.

CSS

Pertama mendefinisikan beberapa gaya yang umum:

@font-face {

    font-family: 'icons';

    src: url("font/icons.eot");

    src:

        url("font/icons.eot?#iefix") format('embedded-opentype'),

        url("font/icons.woff") format('woff'),

        url("font/icons.ttf") format('truetype'),

        url("font/icons.svg#icons") format('svg');

    font-weight: normal;

    font-style: normal;

}

/* Let's set and reset some common styles */

.mb-wrap {

    width: 300px;

    margin: 20px auto;

    padding: 20px;

    position: relative;

}

.mb-wrap p{

    margin: 0;

    padding: 0;

}

.mb-wrap blockquote {

    margin: 0;

    padding: 0;

    position: relative;

}

.mb-wrap cite {

    font-style: normal;

}

Kami menambahkan font ikon yang akan kami gunakan dalam beberapa contoh. Kami juga menetapkan standar gaya beberapa untuk pembungkus kutipan dan unsur-unsur batin. Perhatikan, bahwa ada gaya default beberapa untuk beberapa elemen, jadi kami ingin me-reset mereka.

Contoh 1

Contoh pertama akan memiliki latar belakang kulit dan thumbnail bulat untuk dekorasi.

Jadi, mari kita gaya pembungkus seluruh pertama. Kami akan memberikan tekstur latar belakang dan mendefinisikan lebar:

.mb-style-1 {

    background: #363738 url(../images/dark_leather.jpg) repeat top left;

    margin-top: 100px;

    padding-top: 100px;

    width: 400px;

    color: #fff;

    box-shadow: 1px 1px 3px rgba(0,0,0,0.3);

    border-top: 10px solid #fff;

}

Thumbnail putaran akan ditarik dengan menggunakan nilai atas negatif. Dengan perbatasan semi-transparan, kita akan menambahkan beberapa bakat:

.mb-style-1 .mb-thumb {

    display: block;

    width: 180px;

    height: 180px;

    border: 10px solid rgba(255,255,255,0.5);

    border-radius: 50%;

    background: url(../images/Dartagnan-musketeers.jpg) no-repeat center center;

    position: absolute;

    left: 50%;

    top: -90px;

    margin: 0 0 0 -90px;

    box-shadow:

        inset 1px 1px 4px rgba(0,0,0,0.5),

        0 2px 3px rgba(0,0,0,0.6);

}

Untuk menambahkan tanda kutip, kita akan menggunakan font icon yang kita telah disertakan sebelum dan pseudo-kelas: sebelum dan: setelah. Akan memiliki gaya terukir karena kita sedang mengatur warna gelap dengan bayangan teks cahaya:

.mb-style-1 blockquote:before,

.mb-style-1 blockquote:after {

    font-family: 'icons';

    position: absolute;

    font-size: 70px;

    top: -95px;

    color: #242526;

    text-shadow: 0 1px 1px rgba(255,255,255,0.1);

}

.mb-style-1 blockquote:before{

    content: '\275d';

}

.mb-style-1 blockquote:after{

    right: 0px;

    content: '\e800';

}

Gaya untuk elemen teks adalah sebagai berikut:

.mb-style-1 blockquote p {

    font-family: Cambria, Georgia, serif;

    font-style: italic;

    font-size: 25px;

    border-bottom: 1px solid rgba(0,0,0,0.5);

    box-shadow: 0 1px 0 rgba(255,255,255,0.1);

    padding: 10px 10px 20px 10px;

    text-align: center;

    margin: 0 0 20px 0;

    text-shadow: 1px 1px 2px rgba(0,0,0,0.6);

}

.mb-style-1 .mb-attribution {

    text-align: right;

}

.mb-style-1 .mb-author{

    text-transform: uppercase;

    font-size: 20px;

    font-weight: bold;

    color: #1b1c1d;

    text-shadow: 0 1px 1px rgba(255,255,255,0.1);

}

.mb-style-1 cite a{

    color: #f0f0f0;

    font-style: italic;

    font-family: Cambria, Georgia, serif;

    text-shadow: 1px 1px 1px rgba(0,0,0,0.7)

}

.mb-style-1 cite a:hover{

    text-shadow: 2px 2px 3px rgba(0,0,0,0.9)

}

Dan itu salah satu contoh! Mari kita periksa yang berikutnya.

Contoh 2

Contoh 2 akan memiliki gaya asimetris mewah dengan elemen bulat pada sisi kiri. Di atas kita ingin menunjukkan sebuah lingkaran dengan tanda kutip. Jadi mari kita pertama menambahkan padding beberapa blockquote untuk mendorong ke bawah:

.mb-style-2 blockquote{

padding-top: 150px;

}

The melingkar pseudo-elemen memiliki gaya berikut:

.mb-style-2 blockquote:after {

    font-family: 'icons';

    background: rgba(235,150,108,0.8);

    width: 130px;

    height: 130px;

    border-radius: 50%;

    content: '\275e';

    position: absolute;

    font-size: 70px;

    line-height: 130px;

    text-align: center;

    top: 0px;

    left: 50%;

    margin-left: -65px;

    color: rgba(255,255,255,0.5);

    text-shadow: 0 1px 1px rgba(255,255,255,0.1);

}

Kami berpusat secara horisontal dengan menetapkan kiri sampai 50% dan memberikan margin kiri negatif setengah lebarnya.

Sekarang, mari kita tambahkan bahwa lingkaran parsial dengan menggunakan lain lancung elemen. Kami memberikan lebar dan tinggi 500px, radius perbatasan 50% dan hanya batas kiri. Ini akan menciptakan bentuk:

.mb-style-2 blockquote:before{

    content: '';

    width: 500px;

    height: 500px;

    border-radius: 50%;

    border-left: 5px solid rgba(235,150,108,0.1);

    position: absolute;

    top: 0px;

    left: -50px;

    z-index: -1;

}

Paragraf dari blockquote akan ditetapkan untuk inline karena kita ingin memisahkan baris:

.mb-style-2 blockquote p {

    font-family: Baskerville, Georgia, serif;

    font-size: 28px;

    font-style: italic;

    background: rgba(255,255,255,0.5);

    display: inline;

    color: rgba(235,150,108,0.8);

    text-shadow: 0 1px 1px rgba(255,255,255,0.5);

    line-height: 46px;

    box-shadow: 0 -6px 0 rgba(235,150,108,0.2);

}

Dan akhirnya, mari kita mendefinisikan gaya untuk elemen teks istirahat:

.mb-style-2 .mb-attribution {

    text-align: right;

}

.mb-style-2 .mb-author{

    text-transform: uppercase;

    font-size: 18px;

    padding-top: 10px;

    font-weight: bold;

    color: #d48158;

    text-shadow: 0 1px 1px rgba(255,255,255,0.1);

}

.mb-style-2 cite a{

    color: #d7aa94;

    font-style: italic;

}

.mb-style-2 cite a:hover{

    color: #d48158;

}

Contoh 3

Untuk gaya ketiga, kami ingin memperbesar bungkusnya dan mengatur bayangan kotak untuk blockquote tersebut:

.mb-style-3 {

    width: 500px;

}

.mb-style-3 blockquote{

    background: #fff;

    padding: 30px;

    border-radius: 5px;

    box-shadow:

        inset 0 2px 0 rgba(188, 147, 200, 0.7),

        -5px -4px 25px rgba(0, 0, 0, 0.3);

}

Kami akan menambahkan panah kecil menunjuk ke bawah menggunakan teknik yang ditawarkan di CSS Arrow Silahkan! :

.mb-style-3 blockquote:after,

.mb-style-3 blockquote:before {

    top: 100%;

    border: solid transparent;

    content: " ";

    height: 0;

    width: 0;

    position: absolute;

    pointer-events: none;

}

.mb-style-3 blockquote:after {

    border-top-color: #ffffff;

    border-width: 10px;

    left: 65%;

    margin-left: -10px;

}

.mb-style-3 blockquote:before {

    border-top-color: rgba(0,0,0,0.01);

    border-width: 11px;

    left: 65%;

    margin-left: -11px;

}

Paragraf akan memiliki gaya berikut:

.mb-style-3 blockquote p {

    font-family: 'Alegreya', serif;

    font-size: 24px;

    color: #b4b4b4;

    font-weight: 400;

    line-height: 40px;

    font-style: italic;

    text-indent: 100px;

    position: relative;

}

Sekarang, kita akan menambahkan tanda kutip ke kiri dengan bantuan elemen pseudo-:

.mb-style-3 blockquote p:before{

    content: '\201C';

    font-family: serif;

    font-style: normal;

    font-weight: 700;

    position: absolute;

    font-size: 175px;

    top: 0px;

    left: -105px;

    color: rgba(188, 147, 200, 1);

    text-shadow: 7px 14px 10px rgba(0, 0, 0, 0.1);

}

Bagian dengan link dan penulis akan memiliki bantalan yang tepat lebih besar karena jempol bahwa kita akan menambahkan:

.mb-style-3 .mb-attribution {

    text-align: right;

    padding: 20px 100px 20px 20px;

    position: relative;

}

Pembagian thumbnail akan menjadi lingkaran kecil dengan gambar penulis sebagai latar belakang:

.mb-style-3 .mb-thumb {

    display: block;

    width: 70px;

    height: 70px;

    border: 5px solid #fff;

    border-radius: 50%;

    background: url(../images/bronte.jpg) no-repeat center center;

    position: absolute;

    right: 10px;

    bottom: 5px;

    box-shadow:

        inset 1px 1px 4px rgba(0,0,0,0.5),

        0 2px 3px rgba(0,0,0,0.6);

}

Dan istirahat teks-gaya adalah sebagai berikut:

.mb-style-3 .mb-author{

    font-family: 'Alegreya SC', serif;

    font-weight: 700;

    font-size: 18px;

    color: rgba(188, 147, 200, 1);

    text-shadow: 0 1px 1px rgba(255,255,255,0.7);

}

.mb-style-3 cite a{

    font-family: 'Alegreya', serif;

    font-weight: 700;

    font-style: italic;

    color: #fff;

    text-shadow: 0 1px 1px rgba(0,0,0,0.3);

}

.mb-style-3 cite a:hover{

    color: rgba(188, 147, 200, 1);

    text-shadow: 0 1px 1px rgba(255,255,255,0.7);

}

Contoh 4

Contoh ini adalah sedikit lebih berani. Kami akan menciptakan sebuah kotak besar gelap dengan kutipan berukuran besar. Citra penulis akan ditetapkan sebagai latar belakang untuk semuanya:

.mb-style-4 {

    width: 600px;

    padding: 20px 240px 50px 20px;

    background: #444 url(../images/dickens.jpg) no-repeat 140% 25%;

    overflow: hidden;

    box-shadow: inset 0 0 10px rgba(0,0,0,0.6);

}

Paragraf dari blockquote tersebut akan memiliki nilai RGBA untuk warna. Ini mari kita mendefinisikan nilai opacity:

.mb-style-4 blockquote p {

    color: rgba(255,255,255,0.95);

    font-size: 21px;

    line-height: 26px;

    text-align: right;

    color: #999;

    text-transform: uppercase;

    font-weight: bold;

}

Span akan memiliki gaya khusus. Kita akan putar sedikit dan memberikan ukuran teks yang lebih besar dan warna yang berbeda:

.mb-style-4 blockquote p span {

    font-weight: 700;

    color: #fcf779;

    font-size: 58px;

    line-height: 58px;

    display: block;

    padding: 10px;

    text-shadow: 7px 7px 2px rgba(0,0,0,0.2);

    transform: rotate(-7deg) translateY(10px);

}

Mari kita menambahkan tanda kutip dari icon yang telah ditetapkan dengan bantuan dari sebelumnya: pseudo-class:

.mb-style-4 blockquote p span:before {

    font-family: 'icons';

    content: '\275d';

    font-weight: normal;

    opacity: 0.1;

    font-size: 136px;

    position: absolute;

    color: #fff;

    top: -50px;

    left: -25px;

    transform: rotate(45deg);

}

Opacity akan sangat rendah dan kami akan memutar di sudut derajat 45.

Pembagian atribusi akan diputar sedemikian rupa sehingga kita hanya bisa melihat segitiga di sudut kanan:

.mb-style-4 .mb-attribution {

    text-align: right;

    text-transform: uppercase;

    font-weight: bold;

    background: #222;

    position: absolute;

    width: 100%;

    left: 0px;

    bottom: 0px;

    text-align: center;

    padding: 30px;

    transform: rotate(-40deg) translate(175px, 110px);

}

Mari kita tambahkan sejumput ke elemen penulis:

.mb-style-4 .mb-author:before {

    content: '\2014';

    padding-right: 4px;

}

.mb-style-4 .mb-attribution cite a{

    color: #777;

}

.mb-style-4 .mb-attribution cite a:hover{

    color: #fcf779;

}

Contoh 5

Contoh kelima akan muncul sebagai satu set lingkaran. Kita akan menggunakan bayangan kotak ganda untuk elemen blockquote dalam rangka untuk mencapai itu:

.mb-style-5 {

    width: 390px;

}

.mb-style-5 blockquote {

    text-align: center;

    background: #333;

    width: 350px;

    height: 350px;

    padding: 60px;

    border-radius: 50%;

    box-shadow:

        inset 0 0 0 10px #333,

        inset 0 0 0 12px rgba(255,255,255,0.6),

        80px 0 0 rgba(255,255,255,0.3),

        -80px 0 0 rgba(255,255,255,0.3),

        50px 0 0 rgba(60,185,145,0.2),

        -50px 0 0 rgba(185,60,60,0.2);

}

Mari kita gaya paragraf:

.mb-style-5 blockquote p {

    color: #fff;

    font-size: 20px;

    font-weight: 400;

    padding-top: 25px;

    text-transform: uppercase;

    text-shadow: 0 0 1px #fff, 0 1px 1px #000;

    font-family: 'Annie Use Your Telescope', cursive;

}

Dalam rangka untuk memisahkan kutipan, kita akan menempatkan bagian terakhir dari menjadi span dan memberikan beberapa margin atas dan padding:

.mb-style-5 blockquote p span {

    display: block;

    position: relative;

    padding-top: 40px;

    margin-top: 40px;

    border-top: 1px solid rgba(255,255,255,0.3);

}

Mari kita tambahkan lingkaran kecil dengan tanda kutip:

.mb-style-5 blockquote p span:before {

    position: absolute;

    width: 50px;

    height: 50px;

    background: #ddd;

    content: "\275d";

    font-size: 40px;

    color: #333;

    top: 0px;

    left: 50%;

    margin: -25px 0 0 -25px;

    border-radius: 50%;

}

Dan akhirnya, beberapa styling untuk elemen teks lainnya:

.mb-style-5 .mb-attribution {

    text-align: center;

    font-family: 'Annie Use Your Telescope', cursive;

    padding: 20px;

    font-size: 16px;

}

.mb-style-5 cite a:hover{

    color: #000;

}

Contoh 6

Contoh terakhir akan terlihat seperti Polaroid, kecuali bahwa kami tidak akan menggunakan gambar tapi kutipan. Mari gaya wrapper pertama:

.mb-style-6 {

    width: 350px;

    height: 400px;

    background: #fff;

    border-radius: 4px;

}

Mari kita tambahkan beberapa bayangan yang bagus dengan teknik ini besar oleh Nicolas Gallagher :

/* Shadow style from Nicolas Gallagher: http://nicolasgallagher.com/css-drop-shadows-without-images/demo/ */

.mb-style-6:before,

.mb-style-6:after {

    content: "";

    position: absolute;

    z-index: -2;

    transform: rotate(-3deg);

    bottom: 15px;

    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);

    height: 20%;

    left: 10px;

    max-height: 100px;

    max-width: 300px;

    width: 50%;

}

.mb-style-6:after {

    transform: rotate(3deg);

    left: auto;

    right: 10px;

}

Blockquote akan memiliki latar belakang gelap:

.mb-style-6 blockquote{

    background: #333;

    height: 75%;

    padding: 30px;

    text-align: center;

}

Dan kami akan menambahkan tanda kutip ke sisi kanan:

.mb-style-6 blockquote:before{

    color: rgba(255,255,255,0.2);

    position: absolute;

    content: '\0022';

    font-size: 150px;

    line-height: 130px;

    font-style: italic;

    top: 0px;

    right: 20px;

    font-family: Cambria, Georgia, serif;

}

Paragraf akan memiliki gaya berikut:

.mb-style-6 blockquote p {

    color: #fff;

    font-family: 'Abril Fatface', sans-serif;

    font-size: 24px;

    text-shadow: 1px 1px 1px #000;

}

Mari kita tambahkan beberapa padding ke divisi atribusi:

.mb-style-6 .mb-attribution {

padding: 20px;

}

Unsur penulis akan sedikit diputar dan kami akan menggunakan font tulisan tangan untuk membuatnya terlihat seperti tanda tangan:

.mb-style-6 .mb-author {

    font-size: 24px;

    font-family: 'Dr Sugiyama', cursive;

    -moz-transform: rotate(-4deg);

    color: #070d5f;

}

Dan terakhir, namun tidak sedikit, mengutip link:

.mb-style-6 cite a{

    color: #999;

    text-transform: uppercase;

    letter-spacing: 3px;

    font-size: 12px;

}

.mb-style-6 cite a:hover{

    color: #000;

}

Saya harap Anda menikmati gaya ini dan dapat menemukan inspirasi !

Mary Lou (Manoela Ilic) is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by Mary Lou

Website: http://tympanus.net/

Social Links: Twitter Google+ Facebook

Cara Tambahkan Widget Sharing Keren dibawah halaman posting Blogger

noreply@blogger.com (Anonymous) — Mon, 11 Mar 2013 09:34:00 +0000

Widget bookmark sosial adalah cara paling mudah buat meningkatkan lalu lintas di blog Anda. Hari ini kita berbagi berbagai macam widget bookmark sosial tetapi yang satu ini sedikit berbeda dari yang lainnya, karena masing-masing tombol memiliki tombol yang berbeda background. Ini berisi tombol tweet twitter, seperti tombol facebook dan tombol google +1. Anda hanya perlu menambahkan beberapa potongan kode di template Anda. Coba lihat dari widget ini gulir ke bawah, Anda akan temukan demo di bagian bawah posting, juga tidak lupa untuk menggunakannya :) Sekarang tanpa menunggu lagi mari kita lihat bagaimana untuk menambahkannya ke blog kita.

Pergi ke Blogger Dashboard> Template
Mengambil cadangan dari template Anda
Klik Edit HTML
Tekan tombol Lanjutkan
Periksa kotak centang Perluas Widget Template.
Cari kode di bawah ini dalam template Anda,

<div class='post-footer-line post-footer-line-1'/>

tambahkan potongan kode dibawah tepat di atas itu,

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

<style>

.promote_post_bg {

    height: 103px;

    background: url(https://lh3.googleusercontent.com/-AK_TNwyWxJw/T8XDa2Q6TpI/AAAAAAAAB04/UCczorSYj0s/s1600/helperblogger.com-sharing-widget.png) 0 -7px no-repeat;

    width: 500px;

    margin-left: 65px;

}

.promote_twitter {

    width: 130px;

    height: 38px;

    float: left;

    margin: 0 39px 0 0;

    padding: 65px 0 0 13px;

    text-align: center;

}

.promote_facebook {

    width: 115px;

    height: 40px;

    float: left;

    margin: 0 39px 0 0;

    padding: 63px 0 0 28px;

    text-align: center;

}

.promote_google {

    width: 65px;

    height: 40px;

    float: left;

    margin: 0 39px 0 0;

    padding: 65px 0 0 28px;

    text-align: center;

}

</style>

    <div class='promote_post_bg'>

        <div class='promote_twitter'>

            <a class='twitter-share-button' data-via='helperblogger' href='https://twitter.com/share'>Tweet</a>

            <script>

                !

                function (d, s, id) {

                    var js, fjs = d.getElementsByTagName(s)[0];

                    if (!d.getElementById(id)) {

                        js = d.createElement(s);

                        js.id = id;

                        js.src = "//platform.twitter.com/widgets.js";

                        fjs.parentNode.insertBefore(js, fjs);

                    }

                }(document, "script", "twitter-wjs");

            </script>

        </div>

        <div class='promote_facebook'>

       <fb:like expr:href="data:post.canonicalUrl" layout='button_count' send='false'

                show_faces='false' font="verdana" action="like" colorscheme="light"></fb:like>

            <div>

                <b:if cond='data:post.isFirstPost'>

                    <script>

                        (function (d) {

                            var js, id = 'facebook-jssdk';

                            if (d.getElementById(id)) {

                                return;

                            }

                            js = d.createElement('script');

                            js.id = id;

                            js.async = true;

                            js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";

                            d.getElementsByTagName('head')[0].appendChild(js);

                        }(document));

                    </script>

                </b:if>

                            </div>

        </div>

        <div class='promote_google'>

            <g:plusone annotation="none" size='medium'></g:plusone>

            <script type='text/javascript'>

                (function () {

                    var po = document.createElement('script');

                    po.type = 'text/javascript';

                    po.async = true;

                    po.src = 'https://apis.google.com/js/plusone.js';

                    var s = document.getElementsByTagName('script')[0];

                    s.parentNode.insertBefore(po, s);

                })();

            </script>

        </div>

    </div>

</b:if>

Sekarang simpan template Anda dan selesai.

Saya harap kalian semua pasti akan berhasil seperti ini .Enjoy :) Have a nice day ....

Demo ▼

Cara Membuat Fixed Position Scrolling Sticky Bar

noreply@blogger.com (Anonymous) — Mon, 11 Mar 2013 08:58:00 +0000

Sekarang bar bergulir atau bar sticky telah menjadi sangat populer, dengan cepat menangkap perhatian orang-orang itu sebabnya saya juga menggunakan bar sticky (hellobar) pada blog.Hari ini saya berbagi scrolling bar keren sticky yang mengandung banyak pilihan seperti tombol twitter, google +1 button, facebook seperti tombol, formulir email berlangganan juga ada tombol random post yang akan mengarahkan Anda (setiap Post). Mari kita mulai dan lihat bagaimana cara menambahkan bar ini untuk blogger blog.

Langkah 1: Menambahkan HTML

Go to Blogger Dashboard > Template
Download a copy of your template
Click on Edit HTML
Hit Proceed
Find for below code,

<body>

Catatan - Jika Anda menggunakan template bawaan blogger kemudian cari tag <body>

Lihat video di bawah ini untuk informasi yang tepat.

tambahkan kode di bawah ini tepat di bawah kode di atas,

<div id='HB-Bar-Container'>

<div id='HB-Bar-Content'>

<ul id='HB-Bar-Left'>

<li class='Home'> <a href='http://draftbloger.blogspot.com/'>Home</a> </li>

<li class='Share'> <div id='share-top'>

<ul>

<li> <a class='twitter-share-button' data-count='horizontal' href='http://twitter.com/share'>Tweet</a> </li>

<li> <g:plusone size='medium'></g:plusone> </li>

<li> <div class='fb-like' data-font='verdana' data-layout='button_count' data-send='false' data-show-faces='false'>

</div></li></ul>

<div style='clear:both;'></div></div></li>

</ul>

<ul id='HB-Bar-Right'>

<li class='Subscribe'> <div class='HB-email'>

<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=HBlogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='padding:3px;text-align:center;' target='popupwindow'>

<input class='textarea' gtbfieldid='3' name='email' onblur='if (this.value == "") {this.value = "";}' onfocus='if (this.value == "") {this.value = "";}' placeholder=' Enter Your Email Address :)' type='text' value=''/> <input name='uri' type='hidden' value='HBlogger'/><input name='loc' type='hidden' value='en_US'/> <input class='HB-emailsubmit' type='submit' value='Subscribe'/> </form>

<a href="http://draftbloger.blogspot.com/" title="Blogger Widgets" ><img src="http://img1.blogblog.com/img/blank.gif" /></a> </div></li>

<li class='btt'> <a href='#top' title='Back to top'>Slide to Top ↑</a> </li>

</ul></div></div>

Ganti http://draftbloger.blogspot.com/ dengan URL blog Anda.
Ganti HBlogger dengan feedburner username.

Langkah 2: Menambahkan The Script

Sekarang temukan kode di bawah ,

</body>

tambahkan kode di bawah ini sebelum / di atasnya,

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>

<script>

//<![CDATA[

var b = $("#HB-Bar-Container");var c = b.css("top");$(window).scroll(function (){if ($(this).scrollTop() > 50){b.stop().animate({top: "0px"}, 0)}else{b.stop().animate({top: "-100px"}, 0)}});

//]]>

</script>

<script>

$(document).ready(function(){// fade in .btt

$(function () {$(window).scroll(function (){});// scroll body to 0px on click

$('.btt a').click(function () {$('body,html').animate({scrollTop: 0}, 350);return false;});});});

</script>

<script>(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";fjs.parentNode.insertBefore(js, fjs)}(document, 'script', 'facebook-jssdk'));</script>

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'></script>

<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>

Langkah 3: Menambahkan Styles di Bar

Sekarang temukan kode dibawah ini.

]]></b:skin>

tambahkan kode di bawah ini tepat di atas ]]></b:skin>

#HB-Bar-Container {

background-color:#f6f6f6;

background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));

background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));

}

#HB-Bar-Container , #HB-Bar-Left .Home a, #HB-Bar-Right .btt a,.HB-emailsubmit {

box-shadow: 0 5px 5px -5px #999;

-webkit-box-shadow: 0 5px 5px -5px #999;

-moz-box-shadow: 0 5px 5px -5px #999;

}

#HB-Bar-Container{

margin: 0px 116px;

top:-100px;

-moz-border-radius:0px 0px 10px 10px;

-webkit-border-radius:0px 0px 10px 10px;

border-radius: 0px 0px 10px 10px;

text-align:center;

border-bottom: 1px solid #aaa;

z-index:999;

padding:4px;

height:33px;

  position:fixed;

  vertical-align: baseline;

  }

#HB-Bar-Container *{

padding:0;

}

#HB-Bar-Container a {

text-decoration:none;

}

#HB-Bar-Content{

width:1024px;

margin:0 auto;

}

#HB-Bar-Content li{

list-style:none;

float:left;

}

#HB-Bar-Left{

float:left;

width:45%;

}

#HB-Bar-Right{

float:right;

width55%;

}

#HB-Bar-Left li{

margin-right:1%;

margin-top:-7px;

}

#HB-Bar-Right li{

margin-top:-7px;

}

#HB-Bar-Left .Home a, #HB-Bar-Right .btt a,.HB-emailsubmit{

font-size:9pt;

font-family:cambria;

font-weight:Bold;

text-transform:uppercase;

color:#fff;

text-shadow:0 -1px 1px rgba(0,0,0,0.25);

letter-spacing: 1px;

padding:6px;

border-radius:3px;

-moz-border-radius:3px;

-webkit-border-radius:3px;

}

#HB-Bar-Left .Home a:active, #HB-Bar-Right .btt a:active,.HB-emailsubmit:active{

position: relative;

top: 1px;

box-shadow:none;

}

#HB-Bar-Left .Home a{

background:#143eb4;

}

#HB-Bar-Left .Home a:hover{

background:#1556fa;

}

#HB-Bar-Right .Subscribe{

margin-top:-14px;

}

#HB-Bar-Right .btt a{

background:#00810b;

margin-left:3px;

}

#HB-Bar-Right .btt a:hover{

background:#06b421;

}

.HB-emailsubmit{

background:#ce1527;

cursor:pointer;

border:none;

height:26px;

width:90px;

}

.HB-emailsubmit:hover{

background: #f02a37;

}

.textarea{

border:1px solid #aaaaaa;

-moz-border-radius:3px;

-webkit-border-radius:3px;

border-radius:3px;

resize:none;

font-size:8pt;

font-family:verdana;

width:170px;

height:25px;

color:#000000;

}

#share-top{

background: #f9f9f9;

border:1px solid #dddddd;

line-height: 1;

margin: -4px 0 0 60px;

padding: 10px 0 2px 5px;

-moz-border-radius:3px;

-webkit-border-radius:3px;

border-radius:3px;

}

#share-top li {

display: block;

margin-right: 0;

}

#facebook-widget,#google-widget,#twitter-widget {display:none; }

@media only screen and (min-width : 768px) and (max-width : 1050px),only screen and (min-device-width : 768px) and (max-device-width : 1024px){

#HB-Bar-Container{

display:none;

}

}

Akhirnya simpan template Anda dan lihat blog Anda.

Video Tutorial

Cara Membuat Menu Mega Drop Down untuk Blogger

noreply@blogger.com (Anonymous) — Mon, 11 Mar 2013 08:01:00 +0000

Menu mega drop-down adalah menu terbaik untuk situs / blog yang memiliki banyak item navigasi atau link, hal ini membantu pengunjung menemukan kategori apapun dengan mudah dalam menavigasi blog kita. Hari ini saya berikan cara membuat menu mega drop down yang dirancang oleh codrops Instalasi sangat mudah sehingga Anda tidak akan menghadapi masalah ketika menambahkannya ke blog Anda, sekarang mari kita lihat bagaimana untuk menambahkan ke blog kita. Pertama Anda lihat dulu previewnya dengan mengklik tombol Live Demo di bawah ini,

Pertama langsung aja ke Blogger Dashboard> Layout

Klik Tambah Gadget (di bawah header)

Pilih HTML / JavaScript

Paste kode di bawah ini setelah mengubahnya sesuai keinginan

Lalu Simpan/Save.

<style> ul.ldd_menu {

    margin: 0px;

    padding: 0;

    display: block;

    height: 50px;

    background-color: #D04528;

    list-style: none;

    font-family: "Trebuchet MS", sans-serif;

    border-top: 1px solid #EF593B;

    border-bottom: 1px solid #EF593B;

    border-left: 10px solid #D04528;

    -moz-box-shadow: 0px 3px 4px #591E12;

    -webkit-box-shadow: 0px 3px 4px #591E12;

    -box-shadow: 0px 3px 4px #591E12;

}

ul.ldd_menu a {

    text-decoration: none;

}

ul.ldd_menu > li {

    float: left;

    position: relative;

}

ul.ldd_menu > li > span {

    float: left;

    color: #fff;

    background-color: #D04528;

    height: 50px;

    line-height: 50px;

    cursor: default;

    padding: 0px 20px;

    text-shadow: 0px 0px 1px #fff;

    border-right: 1px solid #DF7B61;

    border-left: 1px solid #C44D37;

}

ul.ldd_menu .ldd_submenu {

    position: absolute;

    top: 50px;

    width: 550px;

    display: none;

    opacity: 0.95;

    left: 0px;

    font-size: 10px;

    background: #C34328;

    border-top: 1px solid #EF593B;

    -moz-box-shadow: 0px 3px 4px #591E12 inset;

    -webkit-box-shadow: 0px 3px 4px #591E12 inset;

    -box-shadow: 0px 3px 4px #591E12 inset;

}

a.ldd_subfoot {

    background-color: #f0f0f0;

    color: #444;

    display: block;

    clear: both;

    padding: 15px 20px;

    text-transform: uppercase;

    font-family: Arial, serif;

    font-size: 12px;

    text-shadow: 0px 0px 1px #fff;

    -moz-box-shadow: 0px 0px 2px #777 inset;

    -webkit-box-shadow: 0px 0px 2px #777 inset;

    -box-shadow: 0px 0px 2px #777 inset;

}

ul.ldd_menu ul {

    list-style: none;

    float: left;

    border-left: 1px solid #DF7B61;

    margin: 20px 0px 10px 30px;

    padding: 10px;

}

li.ldd_heading {

    font-family: Georgia, serif;

    font-size: 13px;

    font-style: italic;

    color: #FFB39F;

    text-shadow: 0px 0px 1px #B03E23;

    padding: 0px 0px 10px 0px;

}

ul.ldd_menu ul li a {

    font-family: Arial, serif;

    font-size: 10px;

    line-height: 20px;

    color: #fff;

    padding: 1px 3px;

}

ul.ldd_menu ul li a:hover {

    -moz-box-shadow: 0px 0px 2px #333;

    -webkit-box-shadow: 0px 0px 2px #333;

    box-shadow: 0px 0px 2px #333;

    background: #AF412B;

} </style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">

    $(function () {

        /**

         * the menu

         */

        var $menu = $('#ldd_menu');

        /**

         * for each list element,

         * we show the submenu when hovering and

         * expand the span element (title) to 510px

         */

        $menu.children('li').each(function () {

            var $this = $(this);

            var $span = $this.children('span');

            $span.data('width', $span.width());

            $this.bind('mouseenter', function () {

                $menu.find('.ldd_submenu').stop(true, true).hide();

                $span.stop().animate({

                    'width': '510px'

                }, 300, function () {

                    $this.find('.ldd_submenu').slideDown(300);

                });

            }).bind('mouseleave', function () {

                $this.find('.ldd_submenu').stop(true, true).hide();

                $span.stop().animate({

                    'width': $span.data('width') + 'px'

                }, 300);

            });

        });

    });

</script>

<ul id="ldd_menu" class="ldd_menu">

<li>

<span>Vacations</span>



<div class="ldd_submenu">

  <ul>

   <li class="ldd_heading">By Location</li>

   <li><a href="#">South America</a></li>

   <li><a href="#">Antartica</a></li>

   <li><a href="#">Africa</a></li>

   <li><a href="#">Asia and Australia</a></li>

   <li><a href="#">Europe</a></li>

  </ul>

  <ul>

   <li class="ldd_heading">By Category</li>

   <li><a href="#">Sun & Beach</a></li>

   <li><a href="#">Adventure</a></li>

   <li><a href="#">Science & Education</a></li>

   <li><a href="#">Extreme Sports</a></li>

   <li><a href="#">Relaxing</a></li>

   <li><a href="#">Spa and Wellness</a></li>

  </ul>

  <ul>

   <li class="ldd_heading">By Theme</li>

   <li><a href="#">Paradise Islands</a></li>

   <li><a href="#">Cruises & Boat Trips</a></li>

   <li><a href="#">Wild Animals & Safaris</a></li>

   <li><a href="#">Nature Pure</a></li>

   <li><a href="#">Helping others & For Hope</a></li>

   <li><a href="#">Diving</a></li>

  </ul>

  <a class="ldd_subfoot" href="#"> + New Deals</a>

</div>

</li>

<li>

<span>Equipment</span>

<div class="ldd_submenu">

  <ul>

   <li class="ldd_heading">By Location</li>

   <li><a href="#">South America</a></li>

   <li><a href="#">Antartica</a></li>

   <li><a href="#">Africa</a></li>

   <li><a href="#">Asia and Australia</a></li>

   <li><a href="#">Europe</a></li>

  </ul>

  <ul>

   <li class="ldd_heading">By Category</li>

   <li><a href="#">Sun & Beach</a></li>

   <li><a href="#">Adventure</a></li>

   <li><a href="#">Science & Education</a></li>

   <li><a href="#">Extreme Sports</a></li>

   <li><a href="#">Relaxing</a></li>

   <li><a href="#">Spa and Wellness</a></li>

  </ul>

  <ul>

   <li class="ldd_heading">By Theme</li>

   <li><a href="#">Paradise Islands</a></li>

   <li><a href="#">Cruises & Boat Trips</a></li>

   <li><a href="#">Wild Animals & Safaris</a></li>

   <li><a href="#">Nature Pure</a></li>

   <li><a href="#">Helping others & For Hope</a></li>

   <li><a href="#">Diving</a></li>

  </ul>

  <a class="ldd_subfoot" href="#"> + New Deals</a>

</div>

</li>

<li>

<span>Locations</span>

<div class="ldd_submenu">

  <ul>

   <li class="ldd_heading">By Location</li>

   <li><a href="#">South America</a></li>

   <li><a href="#">Antartica</a></li>

   <li><a href="#">Africa</a></li>

   <li><a href="#">Asia and Australia</a></li>

   <li><a href="#">Europe</a></li>

  </ul>

  <ul>

   <li class="ldd_heading">By Category</li>

   <li><a href="#">Sun & Beach</a></li>

   <li><a href="#">Adventure</a></li>

   <li><a href="#">Science & Education</a></li>

   <li><a href="#">Extreme Sports</a></li>

   <li><a href="#">Relaxing</a></li>

   <li><a href="#">Spa and Wellness</a></li>

  </ul>

  <ul>

   <li class="ldd_heading">By Theme</li>

   <li><a href="#">Paradise Islands</a></li>

   <li><a href="#">Cruises & Boat Trips</a></li>

   <li><a href="#">Wild Animals & Safaris</a></li>

   <li><a href="#">Nature Pure</a></li>

   <li><a href="#">Helping others & For Hope</a></li>

   <li><a href="#">Diving</a></li>

  </ul>

  <a class="ldd_subfoot" href="#"> + New Deals</a>

</div>

</li>

</ul>

Penting - Hapus kode yang tanda kuning jika Anda telah menambahkan sebuah plugin jQuery untuk blog Anda.

Catatan - Saya sarankan Anda untuk menggunakan Editor HTML untuk menyesuaikan ini atau menu apapun, karena Anda bisa melihat live preview menu Anda ketika Anda melakukan perubahan dalam menu Anda coba lihat gambar di bawah.

Menu ini dirancang oleh Codrops dan telah saya coba, jika Anda ingin berbagi dengan pembaca Anda maka silakan link kembali ke artikel ini.

Jangan ragu untuk posting pertanyaan Anda di bawah ini :)

pEaCe aNd BlEsSiNGs .......

Cara Membuat Facebook Like Box Sexy - V3

noreply@blogger.com (Anonymous) — Sat, 09 Mar 2013 13:31:00 +0000

Facebook memainkan peran paling penting dalam meningkatkan lalu lintas di blog. Anda akan melihat kotak facebook seperti pada blog.sebelumnya sekarang saya posting pop up widget untuk facebook seperti kotak dengan latar belakang image.saya memberikan facebook like box widgets. yang dibuat oleh Nitin Mehta - Jadi saya banyak terima kasih kepadanya yang mau berbagi kepada blogger lainnya.

Berikut adalah tiga langkah untuk menambahkan pop up seperti kotak Jquery ke blog Anda

Langkah 1 - Menambahkan plugin Jquery
(Catatan - Abaikan langkah ini jika Anda telah menambahkan plugin Jquery)

Langsung ke Blogger Dashoard> Desain> Edit HTML.
Cari kode </ head> dan tambahkan kode di bawah ini sebelum itu.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'>
</script>

Langkah 2-Menambahkan The Script

Pergi ke Blogger Dashoard> Desain> Edit HTML.
Cari </ head> tag dan tambahkan kode di bawah ini sebelum / di atasnya.

<script src="https://gj37765.googlecode.com/svn/trunk/html/[www.gj37765.
blogspot.com]jquery.colorbox-min.js"></script> <link rel="stylesheet" href="https://gj37765.googlecode.com/
svn/trunk/html/%5Bwww.gj37765.blogspot.com%5Dfbpopup.css" type="text/css" /> <script type="text/javascript"> jQuery(document).ready(function(){ if (document.cookie.indexOf('visited=flase') == -1) { var fifteenDays = 1000*60*60*24*30; var expires = new Date((new Date()).valueOf() fifteenDays); document.cookie = "visited=true;expires=" expires.toUTCString(); $.colorbox({width:"600px", inline:true, href:"#mdfb"}); } }); </script>

Langkah 3 - Menambahkan HTML.

Sekarang ke Edit Tata Letak> Tambah Gadget A> HTML / JavaScript
Paste kode di bawah ini dan simpan

<div style='display:none'> <div id='mdfb' style='padding:10px; background:#000;'> <center> <table align="center" background="http://4.bp.blogspot.com/-1jHU--_
SEOg/Tx0a68EkOWI/AAAAAAAACdc/bzFCJ3SLibQ/s1600/md123.JPG" border="0"
style="width: 465px; height: 300px; "><tbody> <tr><td height="330" width="465"> <div align="left"> <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/
FeatureLoader.js.php" type="text/javascript"></script> <script type="text/javascript">FB.init("32eb3732082b27e7c314feb421a56208");
</script> <fb:fan profile_id="153138708123803" connections="10" width="330"
height="300" css="https://gj37765.googlecode.com/svn/trunk/html/mddemo/
[www.gj37765.blogspot.com]fblikeboxwithbgimg.css?"></fb:fan> </div></td></tr></tbody></table></center> <p style=" float:right; margin-right:35px; font-size:9px;" >Powered By
<a style=" font-size:9px; color:#3B78CD; text-decoration:none;
" href="http://www.btsnts.blogspot.com">Blogger Widgets</a></p> </div></div>

Ganti 153138708123803 dengan ID username profile anda.
Itu saja.

Cara Membuat Daftar Isi yang Keren

noreply@blogger.com (Anonymous) — Sat, 09 Mar 2013 11:51:00 +0000

Saya ingin berbagi tentang cara membuat Sitemap atau Daftar isi yang sama di Z-T Blog, gambar bisa lihat di atas, saya akan menjelaskan 2 cara membuat sitemap diatas.. oke sobat langsung saja ke caranya.. :)

Cara 1 adalah membuat dari postingan:
sobat masuk ke dashboard
lalu sobat buat entri baru
lalu pindahkan mode compose menjadi HTML
masukan JS berikut.,

Cara 2 adalah membuat dari tata letak:
sobat masuk dashboard
masuk ke tataletak
lalu ke HTML/Javascript
masukan kode berikut.,

<div style="border: 1px solid #000000; height: 250px; overflow: auto; padding: 5px; width: auto;">

<script src="http://dapurtutorial.googlecode.com/files/daftar-isi-auto.js"></script><script src="http://draftbloger.blogspot.com/feeds/posts/default?max-results=999&alt=json-in-script&callback=loadtoc"></script>
</div>

keterangan
Lalu save.. :)
ganti yang warna Merah menjadi URL sobat..

Cara Mudah Membuat Menu Horizontal Menggunakan CSS3 Untuk Blogger

noreply@blogger.com (Anonymous) — Fri, 08 Mar 2013 09:37:00 +0000

Setiap blog / situs harus memiliki menu horizontal / vertikal di atas blog yang membantu pembaca dengan mudah menavigasi blog Anda, juga membantu Anda untuk mengatur link penting pada menu.hari ini saya berbagi menu horizontal yang bagus yang bekerja murni dengan CSS3 yang dirancang oleh dynamicdrive.

Live Menu Demo ▼

Cara Tambah menu ini Untuk Blogger?

Pergi ke Blogger Dashboard> Layout
Klik Pada Tambah Tab Link Gadget (bawah Header)
Paste Kode Dan Simpan Ini.

Click On Image To Enlarge

<style type="text/css">

/* Only CSS3 Horizontal Menu For Blogger By http://www.helperblogger.com/ */

div.topbar {

height: 16px;

background: #e16031;

}

ul.claybricks {

font-weight: bold;

width: 100%;

background: #e3e490;

padding: 6px 0 6px 0;

margin: 0;

text-align: left;

font-family: calibri;

}

ul.claybricks li {

display: inline;

}

ul.claybricks li a {

color: black;

padding: 6px 8px 4px 8px;

margin-right: 20px;

text-decoration: none;

}

ul.claybricks li a:hover, ul.claybricks li a.selected {

color: white;

background: #5d4137;

background: -moz-linear-gradient(top, #5d4137 0%, #41251b 12%, #2c0f05 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5d4137), color-stop(12%,#41251b), color-stop(100%,#2c0f05));

background: -webkit-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);

background: -o-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);

background: -ms-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);

background: linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d4137', endColorstr='#2c0f05',GradientType=0 );

-moz-box-shadow: 0 0 5px #595959;

-webkit-box-shadow: 0 0 5px #595959;

box-shadow: 0 0 5px #595959;

padding-top: 17px;

padding-bottom: 6px;

}

/* Only CSS3 Horizontal Menu For Blogger By http://www.helperblogger.com/ */

</style>

<div class="topbar">

</div>

<ul class="claybricks">

<li><a href="http://www.helperblogger.com/">Home</a></li>

<li><a href="#">CSS Codes</a></li>

<li><a href="#">Forums</a></li>

<li><a href="#">JavaScript</a></li>

<li><a href="#">Gallery</a></li>

<li><a href="http://draftbloger.blogspot.com/">Blogger Widgets</a></li>

</ul>

Sekarang ganti link dan nama link dengan punya Anda sendiri di baris di atas yang disorot.

Akhirnya simpan dan selesai :)

Cara Agar Blog Tampil Di Halaman Utama

noreply@blogger.com (Anonymous) — Thu, 07 Mar 2013 19:01:00 +0000

1. Silahkan sobat tentukan keyword yang akan di tembak, kemudian ketik di pencarian kang Google.Dan lihat hasil pencarian.Jika hasil pencarian sudah melebihi angka ratusan ribu, misal 1.000.000 hasil pencarian.maka sobat harus mencari keyword lain yang hasil pencariannya ratusan ribu atau di bawahnya, misal 500.000 hasil pencarian, 830.000 hasil pencarian, 35.000 hasil pencarian dsb.

2. Dalam memilih keyword,yang ingin sobat tembak jangan terlalu biasa/umum, karena akan kalah bersaing.Namun jangan terlalu Spesifik, karena mungkin tak akan ada orang yang bisa menemukan blog/situs sobat.

3. Setelah sobat menemukan keyword yang pas dan cocok untuk sobat tembak.Selanjutnya silahkan sobat membuat Judul artikel yang
mengandung keyword yang sobat pilih tadi.

4. Pasang Deskripsi dan Keyword pada
rancangan blog sobat :
- 'Deskripsi Blog' adalah 'Gambaran tentang blog sobat di tambah keyword yang di pilih'
- 'Keyword' adalah 'kata kunci yang sobat tembak'

5. Tulis keyword yang sobat pilih di awal, tengah, dan
akhir dalam artikel.

6. Tebalkan, Miringkan atau Garis Bawahi pada salah satu keyword yang sobat pilih.

7. Buat label pada artikel yang berisi keyword tembakan sobat.

8. Cari backlink dengan sobat blogger lainnya dengan link yang mengarah ke artikel sobat.

9. Berkomentar dengan menggunakan Nama/URL sobat, jangan gunakan akun google sobat.

10. Buat artikel lanjutan dengan memasang link ke Halaman artikel yang mempunyai keyword tembakan sobat tadi.

Rahasia Ilmu Dasar Seo Cara Mudah Agar Blog Tampil Di Halaman Utama di Pencarian Google,

Jangan Lupa Like Nya Ya :) Jika Tertarik Dan Mau Meng Copy Paste Artikel Ini Harap Cantumkanlah Sumbernya Jadilah Blogger Yang Ber Etika, Trima Kasih

Metapami Magazine - Dark Retro Blogger Template

noreply@blogger.com (Anonymous) — Thu, 07 Mar 2013 17:30:00 +0000

Metapami Magazine Is a Two Column Blogger Template with a Right Sidebar.The Template Colors Are dark mainly black and grey.The template has a magazine style that suits most types of blogs with a dark retro design that could work for gaming or music blogs.

The Templates Features Include :

Split header with blog title on left and banner ad section on the right.
Featured posts slider or image slideshow.
125x125 banner section in the sidebar.
Fixed read more with thumbnails, labels and more on the home page.
Top menu with built in social icons.
4 Columns in the footer for extra gadgets and widgets.

London Creative - Portfolio Gallery Template

noreply@blogger.com (Anonymous) — Thu, 07 Mar 2013 17:25:00 +0000

This Is a Gallery Design Two Column Blogger Template with a Right Sidebar.The Template Colors Are mainly black and red.The Templates Features Include, Drop down navigation menu with search bar.Split header with blog title on left and contact info on the right.Two Level Featured posts slider or image slideshow.Fixed read more with thumbnails on the home page.Numbered page navigation below the posts.You can download This Gallery Blogger Template for Free from BestBloggerTemplates.Net.

Blissful Travel - Three Column Blogger Template

noreply@blogger.com (Anonymous) — Thu, 07 Mar 2013 17:20:00 +0000

This Is a Three Column, Elegant Blogger Template with Left and Right Two Sidebars.The Template Colors Are mainly Blue and White. The Templates Features Include two sidebars, elegant design fixed width, Header Banner, Top Navigation Bar and Tabbed Widget .You can download This Blissful Travel Elegant Blogger Template for Free from BestBloggerTemplates.Net.

TechPost - Three Column Blogger Template

noreply@blogger.com (Anonymous) — Thu, 07 Mar 2013 17:15:00 +0000

This Is a Two Column Blogger Template with a Left and Right Sidebar.The Template Colors Are mainly White, Grey, Red and Black.The Templates Features Include three column footer, adapted from wordpress, fresh, elegant, featured section, technology, header banner, slider, top navigation bar, tabbed widget and web 2.0 .You can download This <TECHPOST>Blogger Template for Free from BestBloggerTemplates.Net.

Kiosk - Blogger Shopping Store Enabled Template

noreply@blogger.com (Anonymous) — Thu, 07 Mar 2013 17:06:00 +0000

Kiosk Is a specialist Blogger template for use as an online store.Designed to show your products with a built in checkout using PayPal.On the home page we have a large slider displaying product images with three posts and footer columns below.The post pages have Three Columns with a Left and Right Sidebar.The Template Colors Are bright and mainly white and orange.You can download This Online Store Blogger Template for Free from BestBloggerTemplates.Net.

Malotino - Special Magazine Blogger Template

noreply@blogger.com (Anonymous) — Thu, 07 Mar 2013 16:47:00 +0000

Malotino Is a Two Column Blogger Template with a Right Sidebar.The Template Colors Are mainly blue and white.The Templates Features Include a split header with ads zone.A navigation menu with built in social icons.Stylish featured posts slide show.Posts on the home page displayed in three columns with auto read more and thumbnail.Three footer columns.You can download This Special Magazine Blogger Template for Free from BestBloggerTemplates.Net.

Template Details :

Name	Malotino Mag Blogger Template
Author	Harish
Designer	SimpleWpThemes.com
Features	3 Columns Fixed Width White and Blue colors Main Navigation Menu Right Sidebar on Post pages Slider Ready Search Engine Optimized Ads ready Auto Post Summaries with thumbnail Footer Widgets Section Custom Follow By Email Widget Adsense support Tested and compatible with all major browsers like IE, FF, Chrome, Safari and Opera

Template Instructions

Basic Instructions :
How to Upload Blogger Template
How to Configure Metatags
How to Configure Favicon

Configure Slider

a. Go to Blogger Dashboard > Design > Edit HTML
b. Click on Expand Widgets Templates checkbox
c. Search for the following code

<!-- Slider -->

After you will see the Links with Images and description, just Customize it!

Configure Main Menu Social Icons

a. Go to Blogger Dashboard > Design > Edit HTML
b. Click on Expand Widgets Templates checkbox
c. Search for the following code

<!-- Social -->

After you will see the link list with Social Links, just Customize it!

How to Add Sidebar Widgets

i am giving a great option for this
the sidebar is not visible in page elements.
usually it is hidden in default. but you can add widget by a simple trick
find this code

#sidebar-wrapper{
display: none ; /* Remove or Add this line to Add the Sidebar Widgets*/
}

If you remove the below line of code in above section, then sidebar widget section is visible in Page Elements tab

display: none ; /* Remove or Add this line to Add the Sidebar Widgets*/

After adding the Sidebar Widgets Again place the above code.

Shutter Shot - Photography Blogger Template

noreply@blogger.com (Anonymous) — Thu, 07 Mar 2013 16:42:00 +0000

Shutter Shot Is a specialist photography Blogger Template.This template has an advanced design that will need some coding experience.The complete background is a slide show to display photos.Menus at the top and bottom allow visitors to navigate through different sections.You can download This Photography Blogger Template for Free from BestBloggerTemplates.Net.

Reporter - News Style Blogger Template

noreply@blogger.com (Anonymous) — Thu, 07 Mar 2013 16:38:00 +0000

Reporter Is a Two Column Blogger Template with a Right Sidebar.The Template Colors Are mainly White and Grey.The Templates Features Include Unique header in three sections with date, blog title and rss feeds.Ribbon style drop navigation menu with built in search bar.Scrolling latest news / Recent posts widget below the header.125x125 ad banner section in the sidebar.jQuery powered featured posts slider.Magazine style fixed read more auto post summary's with thumbnails.Four gadget ready footer columns.You can download This News Style Blogger Template for Free from BestBloggerTemplates.Net.