Xem trước Widget xã hội cho Blogger / Blogspot Làm thế nào để cài đặt Widget đăng ký Way2Blogging xã hội? Thêm CSS! Đăng nhập vào Blogger B...

Xem trước

Widget xã hội cho Blogger / Blogspot

Làm thế nào để cài đặt Widget đăng ký Way2Blogging xã hội?

Thêm CSS!

Đăng nhập vào Blogger Bảng điều khiển > Chọn Blog của bạn và chọn Tùy chọn Xem thêm Dropdown
Chọn Template > Click vào Edit HTML > Tiến hành
Tìm kiếm ]]></b:skin> và đặt đoạn code dưới đây trước khi nó!

@import url("http://fonts.googleapis.com/css?family=Oswald&amp;text=AaBbCcEeFfIiKkLlMmOoRrSsTtWw%20");
.w2bOldSocial ul {
	font-family: 'Oswald', sans-serif;
	margin: 15px 0;
	overflow: hidden;
}
.w2bOldSocial ul li {
	float: left;
	width: 90px;
	padding: 0 0 0 55px !important;
	margin: 0 0 0 5px !important;
	line-height: 48px !important;
}
.w2bOldSocial ul li a {
	font-size: 20px !important;
	text-decoration:none;
	padding:0 !important;
	margin:0 !important;
	text-decoration:none;
}
.w2bOldSocial ul li a:hover {
	text-decoration:underline;
}
.w2bOldSocial ul li.w2brss {
	background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfXnBHa3OFCFvz6WtaBt9TDfaE343qYXP_RyxNkht6z2L6TlLKD8zOuFCkZV8_56brYeRWcOhO30OzMEyk2rE5khC7Oyvd2XeVEYB0-2VudAss8nP8mdWf1FsqjPd3EoiqLpL-2teZdfOM/s48/RSS.png") no-repeat scroll left center transparent !important;
}
.w2bOldSocial ul li.w2bmail {
	background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3f7IcHA4uowPwZOh-pgNYcBFY4ox7bso5a8uH9Ndotn-v8MBiRYu6pqB80FOcAaj1xRaCqPZetcszfJnijw_Xgg2jk3gdv4KRL7KXGu2Ov4nxGjrNOr_z4_3tTKRZKk_N529Frm9toCbe/s48/Mail.png") no-repeat scroll left center transparent !important;
}
.w2bOldSocial ul li.w2btwitter {
	background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHr-ic1jkR9p9-rdxCbOSERQeZJTKlxUEJRzHq0OCHxpwc_23vEWps1feeJo5PerK-jHYt6yhg-ZaBGSsSX5553CH2kVV_CgIWb6a5_3XhmW9Gi6bC-3YHUuJ0TwyO1oW7t3_LJztUiZbQ/s48/Twitter2.png") no-repeat scroll left center transparent !important;
}
.w2bOldSocial ul li.w2bfacebook {
	background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiobJ2M0G10OySGbkfcLr531OZIHfViXmXK32_4TKuenmNi0uK6CfsDmtIvVq6ixkHJ_ImKRK-DhEsdN56PWpdWyotHByoqNWGGjqs0-uEGldm9FUKQlMAbqaE94pOqmZxFHvuNKKruXt7g/s48/Facebook.png") no-repeat scroll left center transparent !important;
}
#w2bEmailsub {
	display: block;
	clear: both;
	margin: 10px 0;
}
form.w2bEmailform {
	margin: 20px 0 0;
	display: block;
	clear: both;
}
.emailText {
	background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5HvqYD6DhrR90E8vQ5fGobbTT2Wv0U7vAu7oqDPiI4-Epxo5BQNqRN4ry2FEZez86nMN7nqsjkmkHfQFXLR_jIwqNmjdixcLCG7-JLx0i0bpl02Ojq9U7KC2ZbpBEJTAv9LpxOZXGs5r0/s28/w2b-mail.png") no-repeat scroll 4px center transparent;
	padding: 7px 15px 7px 35px;
	color: #444;
	font-weight: bold;
	text-decoration: none;
	border: 1px solid #D3D3D3;

	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;

	-webkit-box-shadow: 1px 1px 2px #CCC inset;
	-moz-box-shadow: 1px 1px 2px #CCC inset;
	box-shadow: 1px 1px 2px #CCC inset;
}
.emailButton {
	color: #444;
	font-weight: bold;
	text-decoration: none;
	padding: 6px 15px;
	border: 1px solid #D3D3D3;
	cursor: pointer;

	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;

	background: #fbfbfb;
	background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
	background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
	background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
	background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
	background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}

Thêm Widget

Tới Layout > Click vào Thêm tiện ích trên sidebar của bạn
Chọn Tiện ích HTML / JavaScript và dán mã dưới đây Widget

<div class="w2bOldSocial">
	<ul>
		<li class="w2brss"><a href="http://feeds.feedburner.com/way2blogging">RSS</a></li>
		<li class="w2bmail"><a href="http://feedburner.google.com/fb/a/mailverify?uri=way2blogging" >Email</a></li>
		<li class="w2btwitter"><a href="http://twitter.com/way2blogging">Twitter</a></li>
		<li class="w2bfacebook"><a href="http://facebook.com/way2blogging">Facebook</a></li>
	</ul>
</div>
<div id="w2bEmailsub">
	<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Way2blogging', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="w2bEmailform">
		<input type="hidden" value="Way2blogging" name="uri" />
		<input type="hidden" name="loc" value="en_US" />
		<input type="text" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" value="Enter your email..." name="email" class="emailText" />
		<input type="submit" class="emailButton" value="SignUp" title='' />
	</form>
</div>

Sau khi thêm trên mã Widget Tùy chỉnh RSS, twitter và URL khác như sau.

http://feeds.feedburner.com/way2blogging Feedburner của bạn url

http://feedburner.google.com/fb/a/mailverify?uri = way2blogging thay đổi ID Feedburner

http://twitter.com/way2blogging với URL Twitter của bạn

http://facebook.com/way2blogging với URL trang Facebook của bạn

<Input type = "ẩn" giá trị = " Way2blogging "name =" uri "/> thay đổi các ID Feedburner với bạn.

Làm thế nào để cài đặt Widget Search Box cho Blogger?

Thêm CSS

Thêm dưới đây css mã ]]></b:skin> tag

#w2bOldSearch {
	display: block;
	clear: both;
	margin: 10px 0;
}

#w2bOldSearch #w2bSinput {
	background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4tgh_GIJN74M1AR6gkk6IFfP_C20c-kPp_3otqbl0QI8Pt7qeXx-hejnL6ml7GyIuReU7VP0F-Svgc5J7tt98DCtqFirSmzQFcuVWGvtcwoJXsNKE_yOVMTPMHUL3YFyA5T1lx7xwhiXn/s20/Search-icon.png") no-repeat scroll 8px center transparent !important;
	padding: 7px 15px 7px 35px !important;
	color: #444;
	font-weight: bold;
	text-decoration: none;
	border: 1px solid #D3D3D3 !important;

	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;

	-webkit-box-shadow: 1px 1px 2px #CCC inset;
	-moz-box-shadow: 1px 1px 2px #CCC inset;
	box-shadow: 1px 1px 2px #CCC inset;
}

#w2bOldSearch #w2bSsubmit {
	color: #444;
	font-weight: bold;
	text-decoration: none;
	padding: 6px 15px;
	border: 1px solid #D3D3D3;
	cursor: pointer;

	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;

	background: #fbfbfb;
	background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
	background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
	background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
	background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
	background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}

Thêm Mã dưới đây widget trong tiện ích HTML / JavaScript.

<div id="w2bOldSearch">
	<form action="/search">
		<input type="text" name="q" id="w2bSinput" />
		<input type="submit" value="Search" id="w2bSsubmit"/>
	</form>
</div>